Tailwindcss

TailwindCSS in Rails

Quick Reference

| Category | Classes | |----------|---------| | Layout | flex, grid, container, mx-auto | | Spacing | p-4, m-2, px-6, py-3, space-x-4 | | Typography | text-lg, font-bold, text-center, text-gray-700 | | Colors | bg-blue-500, text-white, border-gray-300 | | Sizing | w-full, h-64, max-w-md, min-h-screen | | Flexbox | flex, items-center, justify-between | | Grid | grid, grid-cols-3, gap-4 | | Responsive | md:flex, lg:grid-cols-4, sm:text-sm |

Installation

# Rails 7+ with Tailwind
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install

Common Patterns

Container & Layout

  Content

  
    Content
  

Flexbox Layouts

  Item 1
  Item 2

  Left
  Right

  Centered

  Item 1
  Item 2

Grid Layouts

  Column 1
  Column 2
  Column 3

  
    
  

  Main content
  Sidebar

Cards

  
  
  
    
  

  Content

Buttons

  ...

Forms

Navigation

  
    
      
      
      
        
        
        
      
      
      
        ...
      
    
  

Tables

  
    
      
        
          Title
        
        
          Author
        
        
          Actions
        
      
    
    
      
        
          
            
          
          
            
          
          
            
            
          
        
      
    
  

Alerts/Flash Messages

   p-4 rounded-md mb-4">
    
      
        
      
      
        
          
        
      
    
  

def alert_class(type)
  case type.to_sym
  when :notice, :success
    "bg-green-100 border border-green-400 text-green-700"
  when :alert, :error
    "bg-red-100 border border-red-400 text-red-700"
  when :warning
    "bg-yellow-100 border border-yellow-400 text-yellow-700"
  else
    "bg-blue-100 border border-blue-400 text-blue-700"
  end
end

Modal

  
    
      Modal Title
      
        Modal content goes here.
      
      
        
          Cancel
        
        
          Confirm
        
      
    
  

Badges

  New

  Published

Responsive Design

  Desktop only

  Mobile only

  Title

  Content

Customization

// config/tailwind.config.js
module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js'
  ],
  theme: {
    extend: {
      colors: {
        'brand': {
          light: '#3fbaeb',
          DEFAULT: '#0fa9e6',
          dark: '#0c87b8',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

Best Practices

1. Use @apply sparingly - Prefer utility classes in templates
2. Create components for repeated patterns
3. Use responsive prefixes - mobile-first approach
4. Leverage Tailwind plugins - forms, typography, etc.
5. Keep custom CSS minimal - use Tailwind's configuration
6. Use consistent spacing scale - stick to theme spacing
7. Optimize for production - PurgeCSS removes unused styles automatically

Common Pitfalls

• Too many utilities - Extract to components or use @apply
• Not purging - Make sure content paths are configured correctly
• Fighting the framework - Use Tailwind's patterns, don't fight them
• Forgetting responsive - Always test mobile-first

References

• Tailwind CSS Documentation
• Tailwind CSS Rails
• Tailwind UI Components

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Shoebtamboli
• Source: Shoebtamboli/railsclaude_skills
• License: MIT
• Homepage: https://rubygems.org/gems/railsclaudeskills

Install and usage instructions live in the source repository linked above.