https://github.com/djc00p/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.
https://github.com/djc00p/tailwind-rails
ai-agent ai-agents ai-skill ai-skills rails ruby ruby-on-rails skill skills tailwindcss
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/djc00p/tailwind-rails
- Owner: djc00p
- License: mit
- Created: 2026-03-31T06:10:46.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-01T22:06:55.000Z (2 months ago)
- Last Synced: 2026-05-01T23:28:21.398Z (2 months ago)
- Topics: ai-agent, ai-agents, ai-skill, ai-skills, rails, ruby, ruby-on-rails, skill, skills, tailwindcss
- Homepage: https://clawhub.ai/djc00p/tailwind-rails
- Size: 8.79 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎨 Tailwind CSS for Rails: Design System
[](#) [](#)
**Consistent, Dark-Mode-Ready UI Components for Ruby on Rails ERB Views.**
This documentation provides a standardized library of Tailwind CSS utility patterns and ERB implementation strategies. The goal is to maintain a unified design language across all Rails applications, ensuring that every component—from badges to complex tables—is responsive, accessible, and natively supports dark mode.
---
## 🚀 The Core Utility: `cn()`
To prevent "class soup" and messy conditional logic in your ERB templates, the foundation of this design system is the `cn()` helper. This helper flattens, de-duplicates, and cleans up CSS class strings.
### Implementation
Add this to your `app/helpers/application_helper.rb`:
```ruby
# app/helpers/application_helper.rb
def cn(*classes)
classes.flatten.compact.join(' ').split.uniq.join(' ')
end
```
### Usage in ERB
Use it to cleanly toggle classes based on object state:
```erb
<%# Clean, readable conditional logic %>
<%= active ? 'Active State' : 'Inactive State' %>
```
---
## 🧩 Standardized Components
### 1. The Badge Pattern
Use these for status indicators (Success, Warning, Error, Info). Always include both light and dark mode color pairs.
| Status | Light Mode | Dark Mode |
| :--- | :--- | :--- |
| **Success** | `bg-green-100 text-green-800` | `dark:bg-green-900 dark:text-green-100` |
| **Warning** | `bg-yellow-100 text-yellow-800` | `dark:bg-yellow-900 dark:text-yellow-100` |
| **Error** | `bg-red-100 text-red-800` | `dark:bg-red-900 dark:text-red-100` |
| **Info** | ` ...blue... ` | ` ...blue... ` |
**Code Snippet:**
```erb
Verified
```
### 2. The Surface Card
Standardized container for content blocks, featuring a subtle border and depth.
```erb
Card Title
Card description text goes here.
```
### 3. Responsive Data Tables
A wrapper designed to handle overflow on mobile devices while maintaining a professional shadow and ring.
```erb
```
---
## 📐 Design Principles & Best Practices
To maintain the integrity of this design system, all developers (and agents) should adhere to the following rules:
### 🟢 Always Do
* **Mobile-First:** Always write base classes for mobile, then use `sm:`, `md:`, and `lg:` prefixes to scale up.
* **Dual-Mode Pairs:** Every color utility should be accompanied by its `dark:` counterpart (e.g., `bg-white dark:bg-gray-950`).
* **Partial Extraction:** If a component is used more than twice, extract it into a partial (eg. `_button.html.erb`).
* **Semantic Coloring:** Use color to convey meaning (Green = Success, Red = Error).
### 🔴 Never Do
* **Never use "Class Soup":** Avoid long, unreadable strings of classes in your ERB; always use the `cn()` helper for logic.
* **Never ignore contrast:** Ensure that your `dark:text-gray-400` is readable against `dark:bg-gray-950`.
* **Never skip the `cn()` helper:** Do not manually concatenate strings with `+` or `#{}` without the helper, as it leads to messy whitespace and duplicate classes.
---
## 🔗 Related Documentation
* **[Component Library](./references/components.md)**: Full library of shared partials (Buttons, Modals, Inputs).
* **[Dark Mode & Responsiveness](./references/dark-mode-responsive.md)**: Advanced CSS architecture and breakpoint strategies.
---
**Original implementation by [@djc00p](https://github.com/djc00p)**