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-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我想在 Tailwind v4 项目中，将主色调定义为 oklch(0.62 0.19 250)，并生成一套基于 4px 基数的间距比例。'，它会为你生成包含 `:root` 选择器内 CSS 自定义属性的代码片段，清晰定义 `--color-primary` 和 `--spacing-*` 系列变量。或者，你可以说：'帮我配置 Tailwind v4 以支持容器查询插件。'，AI 会指导你如何安装依赖并更新配置文件。
介绍
Tailwind V4 Skill 旨在解决开发者在迁移或使用 Tailwind CSS 最新版本时，如何高效进行 CSS 优先配置和设计令牌管理的问题。它提供了直接通过对话来设置项目、定义主题变量、使用 OKLCH 颜色空间以及配置各种实用工具的能力，简化了复杂的配置过程。
使用时，开发者只需向 AI 描述你的配置需求，例如设置颜色主题、调整间距比例或配置自定义插件，AI 便会生成相应的 CSS 变量配置代码或配置文件片段。这使得配置过程从手动编写文件转变为交互式对话，大幅提升了效率。
该 Skill 非常适合前端开发、全栈开发和 UI 设计师，尤其是那些正在或计划在新项目中使用 Tailwind CSS v4，并希望充分利用其 CSS 原生特性和现代化设计令牌体系的用户。
建议在使用前对 Tailwind CSS 的基础概念有一定了解。由于 v4 仍处于 alpha/beta 阶段，生成的配置代码可能需要根据官方最新文档进行微调，并注意在生产环境中充分测试。
核心特点
与通用的 Tailwind 配置助手不同，本 Skill 专注于 v4 版本的 CSS 优先配置范式，特别是对 CSS 自定义属性（设计令牌）和 OKLCH 颜色空间的深度支持，能生成更符合 v4 新架构的配置代码。
注意事项
不适合需要为 Tailwind CSS v3 或更旧版本进行配置的场景，也不直接处理非 CSS 配置（如复杂的 JavaScript 逻辑集成）。
常见问题
如何用这个 Skill 定义主题颜色？
直接告诉 AI 你想要的颜色值或使用 OKLCH 格式，它会生成对应的 CSS 变量配置代码。
它能帮我从 v3 升级到 v4 吗？
可以辅助生成 v4 的配置片段，但完整的迁移工作仍需开发者根据变更日志手动调整部分代码结构。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-v4-x-4/raw/index.md 读取 Tailwind V4 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-v4-x-4/raw/index.md（查看排版版本）