Menu
TailwindCSS utility-first styling for Rails
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Export tasks from TodoWrite or feature plans into structured markdown files (epic, user-story, bug, issue) in a tasks/ directory. Use when the user wants to create task files, export tasks, track work in files, or mentions "create tasks", "export", "epic", "user story".
Write, review, and improve Minitest tests for Ruby on Rails applications. Covers model tests, controller tests, system tests, fixtures, and best practices from Rails Testing Guide.
Gather requirements, analyze codebase, and create structured task lists before starting Rails feature development. Use when planning new features, starting development work, breaking down requirements, or when the user mentions "plan", "requirements", "tasks", or "kickoff".
Deploy Rails applications to production using Kamal, Docker, and modern deployment strategies. Covers zero-downtime deployments, environment management, database migrations, SSL/TLS, and production configurations.
Refine and clarify feature requirements by asking targeted follow-up questions, then update or create tasks based on answers. Use after initial planning when requirements need clarification, or when the user mentions "refine", "clarify", "more details", or "questions".
Pagination for Ruby on Rails applications using Kaminari. Use when: (1) Implementing pagination for database records, (2) Building paginated API endpoints, (3) Customizing pagination UI with themes, (4) Handling large datasets efficiently, (5) Creating infinite scroll, (6) Paginating arrays or custom collections, (7) Adding SEO-friendly pagination URLs, (8) Internationalizing pagination labels
Based on SOC occupation classification
| name | tailwindcss |
| description | TailwindCSS utility-first styling for Rails |
| version | 1.0.0 |
| rails_version | >= 7.0 |
| tags | ["css","tailwind","styling","frontend"] |
| 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 |
# Rails 7+ with Tailwind
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
<%# Max-width container %>
<div class="container mx-auto px-4">
Content
</div>
<%# Full-width section with max-width content %>
<section class="w-full bg-gray-100">
<div class="max-w-7xl mx-auto px-4 py-8">
Content
</div>
</section>
<%# Horizontal flex %>
<div class="flex items-center space-x-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
<%# Space between %>
<div class="flex justify-between items-center">
<div>Left</div>
<div>Right</div>
</div>
<%# Centered content %>
<div class="flex items-center justify-center min-h-screen">
<div>Centered</div>
</div>
<%# Vertical flex %>
<div class="flex flex-col space-y-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
<%# Basic grid %>
<div class="grid grid-cols-3 gap-4">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
<%# Responsive grid %>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<% @posts.each do |post| %>
<%= render post %>
<% end %>
</div>
<%# Grid with different column spans %>
<div class="grid grid-cols-12 gap-4">
<div class="col-span-8">Main content</div>
<div class="col-span-4">Sidebar</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-2"><%= @post.title %></h3>
<p class="text-gray-600"><%= @post.excerpt %></p>
<div class="mt-4">
<%= link_to "Read More", @post, class: "text-blue-500 hover:text-blue-700" %>
</div>
</div>
<%# Card with hover effect %>
<div class="bg-white rounded-lg shadow hover:shadow-xl transition-shadow duration-300 p-6">
Content
</div>
<%# Primary button %>
<%= link_to "Submit", path, class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>
<%# Secondary button %>
<%= link_to "Cancel", path, class: "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded" %>
<%# Outline button %>
<%= link_to "Edit", path, class: "border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-bold py-2 px-4 rounded" %>
<%# Icon button %>
<button class="bg-blue-500 hover:bg-blue-700 text-white p-2 rounded-full">
<svg class="w-6 h-6">...</svg>
</button>
<%= form_with model: @post, class: "space-y-6" do |f| %>
<div>
<%= f.label :title, class: "block text-sm font-medium text-gray-700 mb-1" %>
<%= f.text_field :title, class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" %>
</div>
<div>
<%= f.label :body, class: "block text-sm font-medium text-gray-700 mb-1" %>
<%= f.text_area :body, rows: 6, class: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" %>
</div>
<div class="flex items-center">
<%= f.check_box :published, class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" %>
<%= f.label :published, class: "ml-2 block text-sm text-gray-900" %>
</div>
<div class="flex space-x-4">
<%= f.submit "Save", class: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded" %>
<%= link_to "Cancel", posts_path, class: "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-6 rounded" %>
</div>
<% end %>
<nav class="bg-white shadow-lg">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<%= link_to "Logo", root_path, class: "text-xl font-bold text-gray-800" %>
<div class="hidden md:flex space-x-8">
<%= link_to "Home", root_path, class: "text-gray-700 hover:text-blue-500" %>
<%= link_to "Posts", posts_path, class: "text-gray-700 hover:text-blue-500" %>
<%= link_to "About", about_path, class: "text-gray-700 hover:text-blue-500" %>
</div>
<button class="md:hidden">
<svg class="w-6 h-6">...</svg>
</button>
</div>
</div>
</nav>
<div class="overflow-x-auto">
<table class="min-w-full bg-white border">
<thead class="bg-gray-100">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Title
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Author
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<% @posts.each do |post| %>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<%= post.title %>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<%= post.author.name %>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<%= link_to "Edit", edit_post_path(post), class: "text-blue-500 hover:text-blue-700 mr-4" %>
<%= link_to "Delete", post, method: :delete, class: "text-red-500 hover:text-red-700" %>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
<% flash.each do |type, message| %>
<div class="<%= alert_class(type) %> p-4 rounded-md mb-4">
<div class="flex">
<div class="flex-shrink-0">
<%# Icon %>
</div>
<div class="ml-3">
<p class="text-sm font-medium">
<%= message %>
</p>
</div>
</div>
</div>
<% end %>
<%# Helper method %>
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
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
<div class="mt-3">
<h3 class="text-lg font-medium text-gray-900 mb-4">Modal Title</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Modal content goes here.</p>
</div>
<div class="mt-4 flex justify-end space-x-3">
<button class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400">
Cancel
</button>
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
Confirm
</button>
</div>
</div>
</div>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
New
</span>
<span class="inline-flex items-center px-3 py-1 rounded-md text-sm font-medium bg-green-100 text-green-800">
Published
</span>
<%# Hide on mobile, show on desktop %>
<div class="hidden md:block">
Desktop only
</div>
<%# Show on mobile, hide on desktop %>
<div class="block md:hidden">
Mobile only
</div>
<%# Responsive text sizes %>
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
Title
</h1>
<%# Responsive padding %>
<div class="p-4 md:p-8 lg:p-12">
Content
</div>
// 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'),
],
}