# Tailwind Rails

> Tailwind CSS component patterns for Ruby on Rails ERB views. Use when building UI components in Rails, creating shared partials, implementing dark mode, writing badge/button/card/table components, or setting up a consistent design system. Trigger phrases: tailwind rails, rails UI components, ERB tailwind, rails dark mode, tailwind badge, tailwind button rails, shared partials tailwind.

- Skill: `djc00p/tailwind-rails` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add djc00p/tailwind-rails`
- Raw SKILL.md: https://api.skillmd.com/api/skills/djc00p/tailwind-rails/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: djc00p (https://skillmd.com/u/djc00p)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/djc00p/tailwind-rails

---


# Tailwind CSS for Rails

Build consistent, dark-mode-ready component patterns in Rails ERB views using Tailwind utilities and reusable partials.

## Quick Start

Add a class name helper to collapse conditional logic:

```ruby
# app/helpers/application_helper.rb
def cn(*classes)
  classes.flatten.compact.join(' ').split.uniq.join(' ')
end
```

Use it in views to combine base and conditional classes:

```erb
<div class="<%= cn('px-4', active ? 'bg-blue-500' : 'bg-gray-200') %>">
  Content
</div>
```

Standard full-width container with responsive padding:

```erb
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <!-- Page content -->
</div>
```

## Badge Pattern

```erb
<span class="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-900 dark:text-green-100">
  Label
</span>
```

**Colors:** Yellow=warning, Blue=info, Green=success, Red=danger, Gray=neutral  
Light: `bg-{color}-100` + `text-{color}-800` | Dark: `dark:bg-{color}-900` + `dark:text-{color}-100`

## Common Components

**Card with border and shadow:**

```erb
<div class="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-950">
  <div class="px-6 py-4">
    <!-- content -->
  </div>
</div>
```

**Table wrapper with responsive shadow:**

```erb
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
  <table class="w-full divide-y divide-gray-200">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>
```

**Tab navigation with underline:**

```erb
<nav class="flex space-x-8 border-b border-gray-300">
  <% tabs.each do |tab| %>
    <% active = current_tab == tab %>
    <%= link_to tab_path(tab),
        class: "py-2 px-1 border-b-2 font-medium text-sm #{active ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-600 hover:text-gray-700'}" do %>
      <%= tab.humanize %>
    <% end %>
  <% end %>
</nav>
```

## Best Practices

1. **Use the `cn()` helper** for all conditional class logic — it deduplicates and removes blanks.
2. **Pair light and dark classes always** — `bg-white dark:bg-gray-950`, `text-gray-900 dark:text-gray-100`.
3. **Mobile-first responsive design** — use `sm:`, `md:`, `lg:` prefixes for breakpoints.
4. **Extract repeated patterns into partials** — `_badge.html.erb`, `_button.html.erb`, `_card.html.erb`.
5. **Use semantic color names** — yellow for warnings, green for success, red for errors.
6. **Ensure sufficient contrast** in both light and dark modes.
7. **Test accessibility** with screen readers and keyboard navigation.

## References

- `references/components.md` — Reusable badge, button, and card partials with usage examples.
- `references/dark-mode-responsive.md` — Dark mode setup, responsive patterns, and animation utilities.