用途:本技能用于配置 Tailwind CSS v4,采用 CSS-first 方式,适用于新项目安装、从 v3 迁移、接入构建工具、定制主题与排查配置问题。
主要能力:介绍 v4 相较 v3 的关键变化——配置从 tailwind.config.js 改为 CSS 中的 @theme 块;导入由三条 @tailwind 指令改为单条 @import "tailwindcss";内容路径由显式 content 数组改为自动检测(遵循 .gitignore);构建管线集成 Lightning CSS,性能提升;颜色支持原生 oklch();并列出工具类变更,如 shadow-sm→shadow-xs、rounded-sm→rounded-xs、bg-gradient-to-r→bg-linear-to-r,以及 outline 相关调整。
使用方式:安装时新项目推荐 Vite 插件,已有项目用 PostCSS 插件,静态站点用 CLI。迁移可运行 npx @tailwindcss/upgrade。主题令牌写在 @theme 块中,自定义工具类用 @utility,可复用变体逻辑用 @custom-variant。技能通过上下文文件按需展开:setup-examples.md(安装与 CSS 配置)、migration-guide.md(v3 迁移)、framework-examples.md(Next.js、React、Vue、SvelteKit)、advanced-config.md(多样式表、主题、动画)。
适用场景:首次安装、版本迁移、构建工具接入、主题定制、内容检测、插件与自定义工具类、暗色模式与全局选项配置、故障排查。
限制:v4 面向现代浏览器,要求 Chrome/Edge 111+、Firefox 128+、Safari 16.4+。不应再创建 tailwind.config.js,不应分开使用 @tailwind base/components/utilities,不应使用 bg-opacity-50 这类透明度工具类(改用 /50),也不应加载旧版 autoprefixer 或 postcss-import。具体安装命令、价格与平台支持等资料暂未提供。