Tailwind V4
Tailwind CSS v4 CSS-first配置与设计令牌
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind V4。 它的用途是：Tailwind CSS v4 CSS-first配置与设计令牌 完整的 Skill 内容见：https://321skill.com/skills/tailwind-v4-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我想用 Tailwind V4 配置一个暗色主题，使用 OKLCH 蓝色作为主色，间距统一为 4px 的倍数。' 它会生成包含 @theme 指令的 CSS 示例，并展示如何在 HTML 中使用 bg-primary、text-primary、p-4 等类名，同时给出兼容性建议和 PostCSS 配置片段。
介绍
Tailwind V4 是新一代的 CSS 框架，采用 CSS-first 配置方式，让你直接使用原生 CSS 变量和设计令牌（design tokens）来定义主题。它废弃了传统的 tailwind.config.js 文件，改用 @theme 指令在 CSS 中声明颜色、间距、断点等设计令牌，并原生支持 OKLCH 色彩空间，使颜色更鲜艳、更精准。这个 Skill 帮助你快速上手 Tailwind v4，高效配置主题变量，利用 OKLCH 颜色创建现代 UI，以及管理 CSS 变量与设计系统。
使用方法非常简单：在项目中安装 Tailwind v4 后，你可以在 CSS 文件中通过 @import “tailwindcss” 引入，然后使用 @theme 指令定义自定义设计令牌，例如 @theme { --color-primary: oklch(0.6 0.2 240); }。随后在 HTML 或 JSX 中直接使用 bg-primary 等类名即可。该 Skill 还会指导你如何结合 PostCSS、Vite、Next.js 等工具进行配置，并处理新旧版本兼容问题。
适合前端开发、全栈开发、UI 设计师使用。无论你是在搭建新项目还是迁移现有项目，这个 Skill 都能帮你快速掌握 v4 的核心理念，避免踩坑。对于需要统一设计系统、管理多主题的团队尤其有价值，因为 CSS-first 配置更贴近原生 CSS 开发习惯，便于团队协作和版本管理。
使用建议：建议先了解 Tailwind v3 的基础知识，然后直接尝试 v4 的 CSS-first 方式。注意 v4 不再支持旧的 tailwind.config.js 语法，迁移时需要重写配置。另外，OKLCH 颜色在某些老旧浏览器中可能有兼容性问题，建议使用 PostCSS 插件或手动 fallback。
核心特点
与 Tailwind v3 版本 Skill 不同，本 Skill 专注于 v4 独有的 CSS-first 配置和设计令牌机制，原生支持 OKLCH 色彩，无需额外配置文件，直接通过 CSS 变量定义主题，更符合现代 CSS 开发范式。
注意事项
不适用于仍使用 tailwind.config.js 的旧项目迁移（需手动重构配置），也不适合需要完全动态运行时主题切换的场景。
常见问题
如何安装 Tailwind V4？
使用 npm install tailwindcss@latest 安装，或通过 CDN 引入。具体安装方式取决于你的构建工具，建议参考官方文档。
Tailwind V4 和 V3 有哪些主要区别？
V4 采用 CSS-first 配置，不再需要 tailwind.config.js，改用 @theme 指令定义设计令牌；原生支持 OKLCH 颜色；性能更好；类名语法有所调整。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-v4-x-3/raw/index.md 读取 Tailwind V4 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-v4-x-3/raw/index.md（查看排版版本）