Tailwind V4
基于CSS优先配置和设计令牌的Tailwind CSS v4工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind V4。 它的用途是：基于CSS优先配置和设计令牌的Tailwind CSS v4工具 完整的 Skill 内容见：https://321skill.com/skills/tailwind-v4-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘为我的新项目初始化一个Tailwind CSS v4配置，使用OKLCH色彩空间定义一套包含primary、secondary和neutral的颜色主题。’，它会生成一个包含`@theme`指令和OKLCH颜色值的CSS或配置文件片段。或者，你可以说：‘我的设计稿里用了这些颜色值，帮我把它们转换成Tailwind v4的OKLCH配置。’，它会进行转换并提供可直接使用的代码。
介绍
Tailwind V4 Skill旨在解决前端开发者在配置和使用Tailwind CSS最新版本（v4）时遇到的复杂性和不一致性问题。它通过提供CSS优先的配置方式和标准化的设计令牌（Design Tokens），帮助开发者快速、一致地定义主题变量、颜色系统（如OKLCH）和整体样式配置。
使用该Skill时，你可以直接通过自然语言指令来设置或修改Tailwind v4的配置。例如，你可以要求它生成特定的主题变量定义、配置OKLCH颜色调色板，或者为你生成完整的tailwind.config.js文件片段。它理解Tailwind v4的新语法和最佳实践，并能提供准确的代码输出。
这个Skill非常适合前端开发、全栈开发和UI设计师，尤其是那些正在或计划在新项目中使用Tailwind CSS v4的开发者。对于希望统一团队设计系统、采用现代色彩空间（OKLCH）或优化CSS构建流程的团队来说，它是一个高效的辅助工具。
使用建议包括：在项目初始化阶段用它来搭建基础配置框架；在需要扩展或修改设计系统时，用它来生成符合v4规范的代码。需要注意的是，它主要服务于配置和代码生成阶段，对于复杂的、需要深度定制的CSS-in-JS逻辑或非Tailwind的样式方案，可能需要结合其他工具或手动调整。
核心特点
专注于Tailwind CSS v4这一特定版本，提供CSS优先配置和设计令牌（Design Tokens）的精准支持，能直接生成符合v4新语法（如`@theme`指令）和OKLCH色彩空间的配置代码，而非通用的CSS工具或旧版Tailwind助手。
注意事项
不适合处理Tailwind CSS v3及以下版本的配置，或用于编写非Tailwind框架的纯CSS样式。
常见问题
Tailwind V4和V3配置有什么区别？
V4采用CSS优先配置，支持`@theme`指令和OKLCH颜色，配置更模块化、声明式。
如何用这个Skill设置OKLCH颜色？
直接描述你需要的颜色（如‘主品牌色’），它会生成基于OKLCH色彩空间的Tailwind v4颜色配置代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-v4-x-6/raw/index.md 读取 Tailwind V4 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-v4-x-6/raw/index.md（查看排版版本）