Tailwind V4
Tailwind v4 CSS-first配置与设计令牌
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind V4。 它的用途是：Tailwind v4 CSS-first配置与设计令牌 完整的 Skill 内容见：https://321skill.com/skills/tailwind-v4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我用Tailwind v4定义一个以OKLCH颜色为主色调的主题，主色为oklch(0.6 0.2 260)，生成对应的CSS变量和设计令牌。' 它会输出包含--color-primary等变量的CSS代码，以及如何在@theme块中配置的示例，并自动生成深色模式下的变体颜色。
介绍
Tailwind CSS v4 引入了 CSS-first 配置范式，要求开发者直接使用 CSS 变量和 @theme 指令定义设计令牌（design tokens），而非传统的 JavaScript 配置文件。手动管理这些变量容易出错，尤其是 OKLCH 颜色空间的引入增加了复杂度。本 Skill 提供了一套标准化模板和最佳实践，帮助你快速定义主题变量、生成 OKLCH 颜色方案、配置断点与间距，并确保命名规范与项目一致性。
使用方法：首先确保项目已安装 Tailwind CSS v4（npm install tailwindcss@next），然后通过本 Skill 的指令在 CSS 文件中生成 @theme 块，定义颜色、字体、间距等设计令牌。支持直接输入 OKLCH 颜色值，自动转换为 CSS 变量，并生成对应的 utility class。还可通过预设规则批量生成深色模式、响应式断点等常用配置。
适用人群：前端开发者、UI 设计师、全栈开发者，尤其是正在迁移到 Tailwind v4 或需要精细控制设计系统的团队。对 CSS-first 模式不熟悉的新手也能快速上手。
使用建议：建议先阅读 Tailwind v4 官方文档中关于 CSS-first 配置的章节，明确设计令牌的命名规则（如 —color-primary 而非 —primary）。本 Skill 生成的变量名遵循 Tailwind 官方约定，但可与项目已有的设计系统结合。注意：OKLCH 颜色在不同浏览器间的兼容性，建议同时提供 fallback 颜色值。
核心特点
同类 Tailwind 配置工具多基于 v3 的 JS 配置文件，而本 Skill 专注 v4 的 CSS-first 模式，内置 OKLCH 颜色空间支持，并自动生成标准化的 @theme 与 CSS 变量，减少手动转换错误。
注意事项
不适用于 Tailwind v3 及以下版本，也不支持非 CSS-first 配置的项目（如仍使用 tailwind.config.js 的项目）。
常见问题
如何安装 Tailwind CSS v4？
运行 npm install tailwindcss@next，并根据项目工具链（Vite、PostCSS 等）安装对应插件（如 @tailwindcss/vite）。
如何定义自定义颜色？
在 CSS 中使用 @theme 块，例如：@theme { --color-primary: oklch(0.6 0.2 260); }，本 Skill 可自动生成完整变量集。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-v4/raw/index.md 读取 Tailwind V4 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-v4/raw/index.md（查看排版版本）