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:
CODEBLOCK0
Use it in views to combine base and conditional classes:
CODEBLOCK1
Standard full-width container with responsive padding:
CODEBLOCK2
Badge Pattern
CODEBLOCK3
Colors: Yellow=warning, Blue=info, Green=success, Red=danger, Gray=neutral bg-{color}-100 + text-{color}-800 | Dark: dark:bg-{color}-900 + INLINECODE3
Common Components
Card with border and shadow:
CODEBLOCK4
Table wrapper with responsive shadow:
CODEBLOCK5
Tab navigation with underline:
CODEBLOCK6
Best Practices
1. Use the cn() helper for all conditional class logic — it deduplicates and removes blanks. Pair light and dark classes always — bg-white dark:bg-gray-950, text-gray-900 dark:text-gray-100.Mobile-first responsive design — use sm:, md:, lg: prefixes for breakpoints.Extract repeated patterns into partials — _badge.html.erb, _button.html.erb, _card.html.erb.Use semantic color names — yellow for warnings, green for success, red for errors.Ensure sufficient contrast in both light and dark modes.Test accessibility with screen readers and keyboard navigation.References
- references/components.md — Reusable badge, button, and card partials with usage examples. INLINECODE14 — Dark mode setup, responsive patterns, and animation utilities. Tailwind CSS for Rails
使用Tailwind工具类和可复用的局部模板，在Rails ERB视图中构建一致、支持深色模式的组件模式。
快速开始
添加一个类名辅助方法来简化条件逻辑：
ruby
app/helpers/application_helper.rb
def cn(*classes)
classes.flatten.compact.join( ).split.uniq.join( )
end
在视图中使用它来组合基础类和条件类：
erb
>
带响应式内边距的标准全宽容器：
erb
徽章模式
erb
颜色： 黄色=警告，蓝色=信息，绿色=成功，红色=危险，灰色=中性
常用组件
带边框和阴影的卡片：
erb
带响应式阴影的表格包装器：
erb
带下划线的标签导航：
erbto tab path(tab),
最佳实践
1. 对所有条件类逻辑使用cn()辅助方法 ——它会去重并移除空白。 始终配对使用浅色和深色类 ——bg-white dark:bg-gray-950、text-gray-900 dark:text-gray-100。移动优先的响应式设计 ——使用sm:、md:、lg:前缀作为断点。将重复模式提取到局部模板中 ——badge.html.erb、 button.html.erb、_card.html.erb。使用语义化颜色名称 ——黄色表示警告，绿色表示成功，红色表示错误。确保浅色和深色模式下都有足够的对比度 。使用屏幕阅读器和键盘导航测试可访问性 。参考
- references/components.md —— 可复用的徽章、按钮和卡片局部模板及使用示例。 references/dark-mode-responsive.md —— 深色模式设置、响应式模式和动画工具类。
