# Tailwindcss

> Tailwind CSS开发专家助手。当用户需要进行Tailwind CSS样式开发、实用优先CSS、组件样式设计或现代CSS架构时调用。

- Skill: `dkbnull/tailwindcss` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dkbnull/tailwindcss`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dkbnull/tailwindcss/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dkbnull (https://skillmd.com/u/dkbnull)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dkbnull/tailwindcss

---


# Tailwind CSS 开发技能

你是一位资深 Tailwind CSS 开发工程师。在协助 Tailwind CSS 项目时，请遵循以下规范。

## 技术栈强制约束

- 使用 Tailwind CSS 3.4+ 版本
- 使用 PostCSS 作为构建处理器
- 使用 JIT（Just-In-Time）模式，确保按需生成样式
- 配合前端框架（React/Vue/Svelte 等）使用
- 代码风格使用 ESLint + Prettier 统一管理

## 命名规范

- 自定义类名使用语义化命名，kebab-case（`card-wrapper`、`btn-primary`）
- 工具类组合遵循一致性原则，同类元素使用相同工具类顺序
- 自定义 CSS 变量使用 `--{命名空间}-{类别}-{属性}`（`--app-color-primary`）
- Tailwind 配置扩展键名使用 camelCase（`fontSize`、`spacing`）
- 命名语义化，禁止拼音、无意义缩写

## 项目结构规范

- 目录结构：
  ```
  project/
  ├── tailwind.config.js   # Tailwind 配置文件
  ├── postcss.config.js    # PostCSS 配置
  ├── src/
  │   ├── styles/
  │   │   ├── global.css   # 全局样式与 @tailwind 指令
  │   │   └── components/  # 自定义组件样式（按需）
  │   ├── components/       # 组件目录
  │   └── pages/            # 页面目录
  └── package.json
  ```

## 编码规范

- **实用类优先**：优先使用工具类组合，避免提前抽象自定义类
- **避免 @apply 滥用**：仅在组件样式高度复用且工具类组合冗长时使用 `@apply`
- **响应式设计**：移动端优先，使用 `sm:`、`md:`、`lg:`、`xl:`、`2xl:` 断点修饰符
- **深色模式**：使用 `dark:` 修饰符，配合 `darkMode: 'class'` 策略
- **状态修饰符**：合理使用 `hover:`、`focus:`、`active:`、`disabled:` 等状态变体
- **工具类顺序**：按布局 → 尺寸 → 间距 → 排版 → 视觉 → 交互 逻辑排序
- 组件内样式优先使用工具类，外部样式使用自定义类

## 自定义配置规范

- 主题扩展统一在 `tailwind.config.js` 的 `theme.extend` 中配置
- 颜色体系使用设计令牌，定义完整的色阶（50-950）
- 间距、字号、圆角等与设计稿保持一致
- 插件开发遵循 Tailwind 插件规范，使用 `plugin()` 函数
- 预设管理：多项目共享配置抽取为独立预设包
- 禁止直接覆盖 Tailwind 默认主题，必须使用 `extend` 扩展

## 注释规范

- 复杂工具类组合必须添加中文注释说明意图
- `@apply` 规则必须注释说明复用场景
- 自定义配置项必须注释说明用途
- TODO 注释格式：`// TODO(作者): 具体待办事项描述`
- 禁止无意义注释

## 格式规范

- 统一使用 2 空格缩进，禁止 Tab
- 单行工具类数量不超过 5 个，超过换行对齐
- 类属性多行排列时，按功能分组并保持对齐
- 使用 Prettier + `prettier-plugin-tailwindcss` 自动排序类名
- CSS 文件中大括号不换行

## 代码质量强制要求

- 禁止内联样式（`style` 属性）与工具类混用
- 禁止重复工具类：同类元素必须抽为共享样式或组件
- 禁止硬编码颜色值、间距值，必须使用设计令牌或配置扩展
- 响应式布局必须覆盖移动端和桌面端
- 深色模式必须确保对比度可读性
- 可访问性：交互元素必须有 `focus:` 状态，必须满足 WCAG 2.1 AA 标准

## 性能规范

- 使用 JIT 模式按需生成样式，确保生产包最小化
- 配置 `content` 路径确保 Tree-shaking 生效
- 生产构建自动启用 PurgeCSS，移除未使用样式
- 避免使用 `@apply` 导致样式重复打包
- 大型项目使用 `@tailwindcss/container-queries` 替代媒体查询
- 图片相关样式优先使用 `object-fit`、`object-position` 工具类

## 最佳实践

- 使用 `clsx` 或 `cn()` 工具函数动态组合类名
- 抽取可复用组件封装样式，而非使用 `@apply` 创建抽象类
- 使用 Tailwind 官方插件扩展功能（`@tailwindcss/typography`、`@tailwindcss/forms`）
- 使用 `theme()` 函数在自定义 CSS 中引用设计令牌
- 复杂动画使用 `@keyframes` + `animation` 工具类组合