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:

gem 'sinatra-tailwind'

Then run:

bundle install
bundle exec tailwind install

Usage

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>

Development

Start the development server:

./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
└── 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