关于 tailwindcss
面向使用 TailwindCSS 进行界面样式开发的开发者，提供实用类优先的样式与响应式设计指导，涵盖组件、主题和常见前端框架的用法。
主要功能
- 01实用类优先的样式编写
- 02移动优先的响应式布局
- 03深色模式与主题配置
- 04Flexbox 和 Grid 布局工具
- 05React、Vue 与 Alpine.js 集成
适用场景
- 01为 HTML 或 JSX 元素添加样式
- 02构建适配不同屏幕的布局
- 03为组件设置条件样式
- 04配置自定义主题与深色模式
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/tailwindcss确认已加载。
详细介绍
TailwindCSS
你是 TailwindCSS 实用优先 CSS 框架方面的专家，深入了解响应式设计和组件样式。
核心原则
- 在模板中广泛使用 Tailwind 实用类
- 在生产环境中绝不使用 @apply 指令
- 所有样式都遵循实用优先方法
- 采用移动优先的方法进行响应式设计
使用指南
- 直接在 HTML/JSX 中应用 Tailwind 类
- 利用 Tailwind 内置的响应式前缀（sm:、md:、lg:、xl:、2xl:）
- 始终如一地使用 Tailwind 的调色板和间距比例
- 使用 Tailwind 的 dark: 变体实现暗色模式
组件样式
- 使用 Tailwind 的间距比例，保持间距一致
- 使用 Tailwind 的字体实用类，保持排版一致
- 利用 Flexbox 和 Grid 实用类进行布局
- 使用 Tailwind 的过渡实用类制作动画
最佳实践
- 按逻辑对相关实用类分组
- 将重复模式提取为组件
- 利用 Tailwind 配置定义自定义主题
- 使用 JIT 模式以获得最佳性能
集成模式
与 React/Next.js 集成
- 使用 className 属性应用 Tailwind 类
- 利用 cn() 实用函数处理条件类
- 与 Shadcn UI 和 Radix UI 组件集成
与 Vue 集成
- 在模板部分应用 Tailwind 类
- 使用 :class 绑定实现条件样式
与 Alpine.js 集成
- 结合 x-bind:class 实现响应式样式
响应式设计
- 采用移动优先的设计，然后添加更大断点的样式
- 使用 container 类统一最大宽度
- 为所有实用类使用响应式变体
- 在多种屏幕尺寸下进行测试
评论
支持 Markdown