Tailwind V4
为 Tailwind CSS v4 提供 CSS 优先配置和设计令牌管理能力。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind V4。 它的用途是：为 Tailwind CSS v4 提供 CSS 优先配置和设计令牌管理能力。 完整的 Skill 内容见：https://321skill.com/skills/tailwind-v4-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在启动一个使用 Tailwind CSS v4 的新项目，想用 OKLCH 颜色来定义主题色板。”，它会引导你如何在 CSS 变量中定义 OKLCH 颜色值，并将其映射为 Tailwind 的设计令牌，例如 `--color-primary: oklch(70% 0.15 250)`。或者，你可以说：“如何为我的按钮组件配置悬停和焦点状态变体？”，它会提供基于 v4 的 `@variant` 指令或配置属性的具体写法示例。
介绍
这个 Skill 专为正在或计划使用 Tailwind CSS v4 的开发者设计，旨在解决新版本带来的配置方式变革问题。Tailwind v4 采用了 CSS 变量和设计令牌（Design Tokens）为核心的配置方法，与传统的 JavaScript 配置文件有所不同，此 Skill 帮助开发者平滑过渡并高效利用新特性。
它通过提供针对 v4 的配置指导、主题变量定义、OKLCH 色彩空间的使用方法以及插件集成等能力，让开发者能够直接在 CSS 文件中或通过新的配置模式来定制设计系统。你可以用它来快速初始化项目、统一颜色和间距等设计令牌，或者配置复杂的响应式与状态变体。
适合前端开发、全栈开发以及需要维护统一设计系统的 UI 设计师使用。特别是那些希望采用更现代、更符合 CSS 原生特性的方式来管理样式，并追求更好视觉一致性的团队。
使用建议：在开始一个新的 Tailwind v4 项目或迁移旧项目时启用此 Skill。请注意，它主要面向 v4 版本，如果你仍在使用 v3 或更早版本，部分配置概念可能不适用。建议结合官方文档一起使用，以获得最佳效果。
核心特点
专注于 Tailwind CSS v4 独有的 CSS 优先配置模式和设计令牌体系，提供从旧版本迁移或新项目启动的针对性指导，而非通用的 CSS 工具或旧版 Tailwind 辅助。
注意事项
不适用于 Tailwind CSS v3 及更早版本的项目配置或非 Tailwind 的 CSS 框架。
常见问题
Tailwind CSS v4 和 v3 配置上主要有什么区别？
v4 转向 CSS 变量和设计令牌进行主题配置，更接近原生 CSS，而 v3 主要依赖 JavaScript 配置文件。
这个 Skill 能帮我将现有 v3 项目升级到 v4 吗？
可以，它能提供配置迁移的思路和 v4 新特性的使用指导，但具体代码转换仍需手动调整。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-v4-x-5/raw/index.md 读取 Tailwind V4 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-v4-x-5/raw/index.md（查看排版版本）