Sinatra::Tailwind

Simple TailwindCSS integration for Sinatra applications.

Overview

Sinatra::Tailwind provides zero-configuration TailwindCSS setup for Sinatra applications. This gem offers:

• 🚀 Instant setup with smart defaults
• 🔄 Automatic CSS reloading
• 🛠 Production-ready builds
• 📦 Zero configuration
• 🎨 Full TailwindCSS features

Installation

Add to your Gemfile:

bundle add sinatra-tailwind

Usage

1. Install Sinatra::Tailwind:

bundle exec tailwind install

This command will create the following files:

public/
└── css/
    ├── application.css
    └── application.min.css # will be generated after build

2. Add the stylesheet to your layout:

<!-- views/layout.erb -->
<link rel="stylesheet" href="/css/application.min.css">

Use TailwindCSS in your views:

<div class="container mx-auto p-4">
  <h1 class="text-3xl font-bold">Hello World</h1>
</div>

3. Import the Sinatra::Tailwind module in your application:

require 'sinatra'

register Sinatra::Tailwind

get '/' do
  erb :index
end

All Done! 🎉

Development

Start the development server:

💡 If you are using the Procfile.dev, you can run the following command:

bin/dev

Or manually:

bundle exec tailwind watch  # Watch CSS changes
bundle exec ruby app.rb     # Run Sinatra server

Commands

tailwind install  # Install TailwindCSS
tailwind watch   # Watch for changes
tailwind build   # Build for production
tailwind setup   # Configure development

Project Structure

my-app/
├── app.rb
├── Procfile.dev
├── bin/
│   └── dev
├── views/
│   └── layout.erb -- Yoy need to add the stylesheet here
└── public/
    └── css/
        ├── application.css
        └── application.min.css

Configuration

TailwindCSS configuration is available in tailwind.config.js:

module.exports = {
  content: ['./views/**/*.{erb,haml,slim}', './public/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Example Application

# app.rb
require 'sinatra'
require 'sinatra/tailwind'

class MyApp < Sinatra::Base
  register Sinatra::Tailwind

  get '/' do
    erb :index
  end
end

Support

• 📘 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

Contributing

Bug reports and pull requests are welcome. See CONTRIBUTING.md.

License

MIT License