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/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我用 Tailwind v4 配置一个项目，主题色使用 OKLCH 颜色空间，并定义间距和字体设计令牌。' 它会生成 CSS 文件示例，包含 `@theme` 指令定义 `--color-primary`、`--spacing-*` 等变量，并指导你安装 `tailwindcss` 和 `@tailwindcss/vite` 等依赖，以及如何在 `vite.config.js` 中引入插件。
介绍
Tailwind CSS v4 带来了全新的 CSS-first 配置范式，彻底告别了传统的 JavaScript 配置文件。本 Skill 专为解决你在使用 Tailwind v4 时遇到的配置痛点而设计，包括如何定义主题变量、使用 OKLCH 颜色空间、配置设计令牌等核心任务。它让你能直接在 CSS 中声明所有样式变量，无需在 tailwind.config.js 中反复修改，从而大幅提升开发效率。
使用方式非常简单：你只需在项目中安装 Tailwind v4 及相关依赖，然后在 CSS 文件中使用 @theme 指令定义颜色、间距、字体等设计令牌，或直接使用 --color-* 等 CSS 自定义属性覆盖默认值。本 Skill 会引导你完成从安装到配置的全流程，并针对 OKLCH 颜色、暗色模式、多主题等场景给出最佳实践。
适合前端开发者、全栈开发者以及 UI 设计师。如果你正在使用或计划迁移到 Tailwind v4，希望在项目中更灵活地管理设计系统，或者对 OKLCH 颜色空间有需求，这个 Skill 会是你的得力助手。
使用建议：建议先了解 Tailwind v4 的 CSS-first 概念，避免与旧版配置方式混淆。本 Skill 不适用于 Tailwind v3 及更低版本，也不适用于需要纯 JavaScript 动态生成配置的场景（如基于用户输入实时生成主题）。请在现有项目中确保已安装 Tailwind v4 相关包，或使用 npm create vite@latest -- --template react 等命令新建项目后再使用。
核心特点
与 Tailwind v3 的 JS 配置方式不同，本 Skill 专注于 Tailwind v4 全新的 CSS-first 配置范式，原生支持 `@theme` 指令和 OKLCH 颜色，让你无需借助任何第三方工具即可在 CSS 中定义和管理完整的设计令牌体系。
注意事项
不适用于 Tailwind v3 及更低版本，也不支持需要通过 JavaScript 动态生成配置的场景。
常见问题
如何在 Tailwind v4 中定义自定义颜色？
在 CSS 文件中使用 `@theme { --color-primary: oklch(0.6 0.15 30); }` 即可定义，然后可直接通过 `bg-primary` 类使用。
Tailwind v4 的 CSS-first 配置和旧版有什么不同？
旧版用 `tailwind.config.js` 定义，新版直接在 CSS 中用 `@theme` 指令或 CSS 自定义属性声明，无需额外配置文件，更直观且与原生 CSS 对齐。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-v4-x/raw/index.md 读取 Tailwind V4 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-v4-x/raw/index.md（查看排版版本）