A professional framework for implementing consistent, dark-mode-ready Tailwind CSS component patterns within Ruby on Rails ERB views.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install tailwind-rails
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install tailwind-rails using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Tailwind CSS for Rails?
Tailwind CSS for Rails is a specialized set of patterns and best practices designed to bridge the gap between utility-first CSS and Ruby on Rails view architecture. This Openclaw Skills entry provides developers with a structured approach to building UI components like badges, cards, and tables while ensuring full compatibility with dark mode and responsive design directly inside ERB templates.
By leveraging reusable partials and a dedicated class name helper, this skill streamlines the process of managing complex conditional styling. It empowers Rails developers to maintain a clean design system without the overhead of heavy JavaScript frameworks, focusing on the native strengths of the Rails asset pipeline and Tailwind utilities.
Tailwind CSS for Rails Use Cases
- Building reusable UI components such as badges, buttons, and cards in Rails ERB views.
- Implementing system-wide dark mode support using standard Tailwind utility classes.
- Creating responsive, mobile-first layouts with consistent padding and container constraints.
- Organizing shared view partials to reduce code duplication across a Rails application.
- Managing complex conditional CSS classes within Ruby logic using the cn helper.
How Tailwind CSS for Rails Works
- The developer integrates a custom application helper to manage conditional CSS strings efficiently.
- Standardized Tailwind utility patterns are applied to ERB elements to define core layout and typography.
- Component-specific logic, such as color-coding for status badges or table responsiveness, is implemented using semantic utility classes.
- Visual states are extended using the dark: prefix to ensure seamless theme switching.
- Repeated UI elements are extracted into shared partials under the app/views/shared directory for global reusability.
Tailwind CSS for Rails Setup
To get started with this Openclaw Skills pattern, first add the class name helper to your application helper:
# app/helpers/application_helper.rb
def cn(*classes)
classes.flatten.compact.join(' ').split.uniq.join(' ')
end
Then, ensure your Tailwind configuration is properly detecting your ERB files in tailwind.config.js:
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
Tailwind CSS for Rails Data Schema & Taxonomy
The skill follows a specific architectural taxonomy for organizing Rails view data and styles:
| Element | Location | Purpose |
|---|---|---|
| Helper Logic | app/helpers/application_helper.rb |
Centralized class name merging and deduplication. |
| Shared Components | app/views/shared/_*.html.erb |
Reusable partials for badges, buttons, and cards. |
| Layouts | app/views/layouts/*.html.erb |
Global containers and responsive wrappers. |
| References | references/ |
Documentation for dark mode, animations, and component specs. |
Tailwind CSS for Rails Advanced Features
- Conditional Class Merging: Uses the cn() helper to prevent duplicate classes and handle nil values gracefully.
- Semantic Color Mapping: Standardized mapping for success (green), warning (yellow), and danger (red) states across both light and dark modes.
- Responsive Table Shrouding: Advanced wrapper patterns for handling complex data tables on mobile viewports.
- Underline Navigation Patterns: Dynamic tab systems that utilize Ruby iteration to manage active state styling.
SKILL.md
Loading
Related Openclaw Skills
English Learner Assistant
An all-in-one English learning assistant designed to improve vocabulary, grammar, and communication through personalized AI-driven workflows.
Chanjing Digital Human Generation
A powerful AI video synthesis skill for training custom digital humans and generating professional talking-head videos via the Chanjing platform.
Mysteel Chart Generation
An automated AI skill that transforms natural language descriptions and structured data into interactive ECharts visualizations rendered as HTML.
Moltbook Trend Analysis
Moltbook Trend Analysis provides data-driven insights and virality benchmarks for the Moltbook AI-agent social network to optimize your content strategy.
MOVA Crypto Trade Review
A professional-grade crypto trade review skill that combines automated risk scoring, sanctions screening, and mandatory human-in-the-loop decision gates.
IAuditor by SafetyCulture AI Agent Skill
A specialized AI agent skill for managing SafetyCulture IAuditor inspections, audits, and safety compliance workflows.
Featured*
