关于 tailwind-design-system-v4
面向 Tailwind CSS v4 项目开发者的设计系统技能，涵盖 CSS 优先配置、设计令牌、组件变体和无障碍模式。也提供 v3 迁移相关指导。
主要功能
- 01CSS 优先配置与设计令牌
- 02组件变体与响应式模式
- 03无障碍组件构建
- 04暗色模式设置
- 05Tailwind v3 迁移指导
适用场景
- 01用 Tailwind v4 创建组件库
- 02为项目配置主题和设计令牌
- 03构建响应式且无障碍的组件
- 04将 Tailwind v3 项目迁移到 v4
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/tailwind-design-system-v4确认已加载。
附带文件PATTERNS.md
详细介绍
Tailwind Design System（v4）
使用 Tailwind CSS v4 构建可用于生产环境的设计系统，涵盖 CSS 优先配置、设计令牌、组件变体、响应式模式和无障碍功能。
注意：此技能适用于 Tailwind CSS v4（2024 年及以后）。对于 v3 项目，请参阅升级指南。
何时使用此技能
- 使用 Tailwind v4 创建组件库
- 使用 CSS 优先配置实现设计令牌和主题
- 构建响应式且易于访问的组件
- 在整个代码库中统一 UI 模式
- 从 Tailwind v3 迁移到 v4
- 使用原生 CSS 功能设置暗色模式
v4 的主要变化
| v3 模式 | v4 模式 |
|---|---|
tailwind.config.ts | CSS 中的 @theme |
@tailwind base/components/utilities | @import "tailwindcss" |
darkMode: "class" | @custom-variant dark (&:where(.dark, .dark *)) |
theme.extend.colors | @theme { --color-*: value } |
require("tailwindcss-animate") | @theme 中的 CSS @keyframes + 用于入场动画的 @starting-style |
CSS 设置、组件模式和迁移说明：PATTERNS.md。
评论
支持 Markdown