Tailwind Modern 是一个面向 Tailwind CSS v4 的技能，目标是在不同环境中保持 v4 正确用法、避免过时模式，并以 CSS-first 方式作为默认。
用途 该技能用于指导 Tailwind 的环境识别、配置生成、代码写作、版本迁移和调试。它强调 Tailwind v4-first：强制 CSS-first 设置，应用官方框架配方，并在生成的指导中替换 v3 时代的旧默认写法。
主要能力 技能按需加载三份参考文档：tailwind-v4-guardrails.md 提供严格的 do/don't 规则、废弃语法陷阱和审查清单；framework-recipes.md 提供独立 HTML/CDN、Vue + Vite、Nuxt 三类环境的设置路径；tailwind-v3-to-v4-deltas.md 提供迁移矩阵、升级替换和兼容性注意事项。核心工作流要求：写任何 Tailwind 设置前先识别目标环境；执行必要检测，包括 nuxt.config.、vite.config.、package.json 依赖、CSS 入口以及 Nuxt 样式表位置（Nuxt v4 风格文档中预期 app/assets/css/main.css）；从 framework-recipes.md 选择匹配配方；应用 guardrails 中的 v4 CSS-first 规则；应用 v3 到 v4 的升级安全替换；运行环境特定验证清单；拒绝并替换废弃或旧式语法。
环境选择 纯 HTML 且无构建工具时使用 Standalone HTML/CDN 配方；Vue 配合 Vite 打包时使用 Vue + Vite 配方；Nuxt 应用使用 Nuxt 配方。Nuxt 默认采用官方路径，即在 nuxt.config.* 中接入 @tailwindcss/vite，而不是旧模块默认方式。若环境不明确，应先检查 package.json、框架配置、构建插件等项目标记，不得猜测。
不可妥协的规则 版本与语法：使用 v4-first 模式和当前文档语义；优先使用 CSS 入口 @import "tailwindcss"；按需使用 @theme、@utility、@variant、@custom-variant、@source、@reference 等指令；除非明确要求兼容，否则将 @config 和 @plugin 视为旧路径；兼容性只能作为有边界的层，并记录迁回 CSS-first 默认的路径。 构建策略：不要假定 Tailwind v4 需要 PostCSS；Vue + Vite 工作流应使用 @tailwindcss/vite 插件集成；Nuxt 应使用官方框架指南流程，在 Nuxt 配置下配置 Vite 插件，而不是给出仅适用于 Vue 的 vite.config.* 说明；设置应保持最小且环境原生。 Vue/Nuxt 样式上下文：组件作用域样式中使用 @apply 或 @variant 时，应包含指向主样式表或应用样式表上下文的 @reference；避免仅为在组件本地样式中暴露主题值而重复导入 CSS。 设计令牌：保持 Tailwind 令牌集中在 @theme；复用已有令牌原语，避免随意硬编码造成漂移。 不要生成：不要将 @tailwind base;、@tailwind components;、@tailwind utilities; 作为默认现代入口；不要假定 Tailwind v4 必须使用 PostCSS；新 Nuxt 指导不要默认首先使用 @nuxtjs/tailwindcss。
输出与完成检查 生成或修改代码时，应始终提供：简短的环境检测说明、所选设置路径（CDN、Vue + Vite 或 Nuxt）、实际应用的废弃到现代替换（语法/工具/工具类变更）、确认 v4 安全设置的快速验证清单，以及保留旧指令（@config/@plugin）时的兼容性说明。完成清单要求：设置前明确识别环境；入口点和指令符合 v4 指导；没有无兼容理由的废弃/旧式语法残留；处理好框架差异（CDN、Vite、Nuxt）；Nuxt 指导使用官方框架路径且不漂移为仅 Vue 的 vite.config.* 步骤；令牌使用集中且一致；生成的说明简洁、确定且面向当前版本。
适用场景与限制 适用于独立 HTML 页面、Vue + Vite 项目、Nuxt 应用的 Tailwind v4 配置、代码生成与审查、v3 到 v4 迁移和调试。限制或未提供的信息：该技能主要面向上述三类环境，其他环境未在资料中说明；具体安装命令、依赖版本号、完整代码示例和官方文档链接暂未提供。