Tailwind V4
Tailwind v4 CSS优先配置与设计令牌工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind V4。 它的用途是：Tailwind v4 CSS优先配置与设计令牌工具 完整的 Skill 内容见：https://321skill.com/skills/tailwind-v4-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我用Tailwind v4配置一个暗色主题，主色为深蓝，辅色为金色，使用OKLCH颜色格式。' 它会生成CSS代码：`@theme { --color-primary: oklch(0.3 0.15 260); --color-accent: oklch(0.7 0.2 80); }`，并自动创建对应的暗色类。
介绍
Tailwind V4 是新一代 CSS 框架，采用 CSS-first 配置和设计令牌（Design Tokens）体系，彻底改变了传统 Tailwind 的使用方式。它解决了 v3 版本中需要大量 JavaScript 配置文件、主题变量分散、难以维护的问题，让开发者可以直接在 CSS 文件中定义一切——颜色、间距、字体、断点等，并原生支持 OKLCH 色彩空间，使设计系统更简洁、更现代化。
使用方式非常直观：你只需在项目的 CSS 文件中通过 @theme 指令声明设计令牌，Tailwind 会自动生成对应的实用工具类。例如 @theme { --color-primary: oklch(0.5 0.2 240); } 即可定义主色并生成 bg-primary、text-primary 等类。同时支持 CSS 嵌套、@layer 排序等现代 CSS 特性，无需额外构建工具。
该工具特别适合前端开发者、全栈工程师和 UI 设计师，尤其是那些需要快速搭建设计系统、管理多主题、或对色彩精度有高要求的项目。无论你是从零开始新项目，还是从 v3 迁移，Tailwind V4 都能显著降低配置复杂度，提升开发效率。
使用建议：建议先熟悉 CSS 自定义属性与 @theme 语法；注意 v4 目前仍处于 Beta 阶段，部分插件（如 @tailwindcss/forms）可能需要适配；若项目依赖大量 v3 自定义插件，建议先评估迁移成本。
核心特点
与同类 CSS 工具（如 UnoCSS、Windi CSS）相比，Tailwind V4 是唯一一个将设计令牌直接嵌入 CSS 标准、并原生支持 OKLCH 色彩空间的官方框架，无需额外配置语言或插件，学习成本更低。
注意事项
不适合完全不使用 Tailwind 的项目，或需要兼容旧版浏览器（如 IE11）的场景。
常见问题
Tailwind v4 如何定义主题变量？
在 CSS 中使用 `@theme` 指令声明，如 `@theme { --color-brand: #ff0000; }`，然后直接使用 `bg-brand` 等类。
v4 与 v3 的配置方式有何不同？
v4 完全基于 CSS 文件，无需 `tailwind.config.js`，所有配置通过 CSS 自定义属性或 `@theme` 完成，更简洁。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-v4-x-2/raw/index.md 读取 Tailwind V4 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-v4-x-2/raw/index.md（查看排版版本）