SuperAPI AI 工具集

tailwind-coder

前端与建站

查看项目

更新于 10-16 00:03

技能介绍

用途:为 Rails 应用视图添加 Tailwind CSS 样式,使用工具类并遵循响应式设计模式,同时与 Rails 视图辅助方法集成。

主要能力:提供 Rails 常见场景的样式写法,包括 link_to 链接、form_with 表单、flash 消息、页面容器、卡片、网格、垂直间距堆叠、按钮变体(主/次/危险)、表单输入与错误态、导航栏、表格,以及响应式断点(sm:、md:、lg:、xl:、2xl:)和暗色模式(需在 tailwind.config.js 中设置 darkMode: 'class')。

使用方式:先检查 Tailwind 是否安装,可执行 cat config/tailwind.config.js 与 cat app/assets/stylesheets/application.tailwind.css。随后在 ERB 视图中直接使用工具类,例如 <%= link_to "Home", root_path, class: "text-blue-600 hover:text-blue-800 underline" %>。对重复模式可抽取视图辅助方法,如 app/helpers/tailwind_helper.rb 中的 btn_primary、card。完成后按输出格式说明变更文件、所用模式、响应式适配与抽取的辅助方法。

适用场景:Rails 项目中使用 Tailwind CSS 构建视图界面,需要统一按钮、表单、导航、表格等组件样式并做响应式适配时。

限制:资料未提供安装步骤、版本要求、收费与价格信息,也未说明对非 Rails 框架的支持情况。