重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
tailwind-best-practices by ofershap/tailwind-best-practices
npx skills add https://github.com/ofershap/tailwind-best-practices --skill tailwind-best-practices在处理 Tailwind CSS 代码时使用此技能。AI 智能体是基于 Tailwind v3 的数据训练的,通常会生成过时的模式——错误的配置文件、已弃用的指令、已移除的实用工具以及冗长的类列表。此技能强制使用 Tailwind CSS v4 的模式。
错误(智能体常犯):
@tailwind base;
@tailwind components;
@tailwind utilities;
正确:
@import "tailwindcss";
原因: Tailwind v4 完全移除了 @tailwind 指令。请使用标准的 CSS @import 语句。
错误(智能体常犯):
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: "#3b82f6",
},
spacing: {
18: "4.5rem",
},
},
},
};
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
@import "tailwindcss";
@theme {
--color-brand: #3b82f6;
--spacing-18: 4.5rem;
}
原因: Tailwind v4 使用基于 CSS 优先的配置和 @theme 指令。大多数项目不再需要 tailwind.config.js。
错误(智能体常犯):
// postcss.config.mjs
export default {
plugins: {
"postcss-import": {},
tailwindcss: {},
autoprefixer: {},
},
};
正确:
// postcss.config.mjs
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
原因: 在 v4 中,postcss-import 和 autoprefixer 已自动处理。插件是 @tailwindcss/postcss,而不是 tailwindcss。
错误(智能体常犯):
<div class="bg-red-500 bg-opacity-50">
<div class="text-blue-600 text-opacity-75"></div>
</div>
正确:
<div class="bg-red-500/50">
<div class="text-blue-600/75"></div>
</div>
原因: bg-opacity-*、text-opacity-*、border-opacity-* 和 placeholder-opacity-* 这些实用工具在 v4 中已被移除。请使用斜杠修饰符语法。
错误(智能体常犯):
<div class="bg-[#3b82f6]"></div>
正确:
@theme {
--color-brand: #3b82f6;
}
<div class="bg-brand"></div>
原因: 应尽量避免使用任意值(如 bg-[#3b82f6])。在 @theme 中定义自定义颜色,以便它们可重用且保持一致。
错误(智能体常犯):
<div class="md:flex-row flex-col"></div>
正确(当尺寸应基于父容器而非视口时):
<div class="@container">
<div class="flex flex-col @md:flex-row">
<!-- 响应容器宽度,而非视口 -->
</div>
</div>
原因: Tailwind v4 内置了容器查询支持。在父元素上使用 @container,在子元素上使用 @sm:、@md:、@lg: 等变体,以实现组件级的响应式设计。
错误(智能体常犯):
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
正确:
@utility content-auto {
content-visibility: auto;
}
原因: Tailwind v4 使用 @utility 指令替代 @layer utilities 来定义自定义实用工具。
错误(智能体常犯):
// tailwind.config.js
module.exports = {
important: true,
};
正确:
@import "tailwindcss" important;
原因: important 选项在 v4 中已从配置文件移至 CSS 导入语句。
错误(智能体常犯):
<div class="shadow-sm ring-1 ring-gray-900/5">
<div class="blur-sm">
<div class="rounded-sm"></div>
</div>
</div>
正确:
<div class="shadow-xs ring-1 ring-gray-900/5">
<div class="blur-xs">
<div class="rounded-xs"></div>
</div>
</div>
原因: 在 v4 中,shadow-sm 被重命名为 shadow-xs,shadow 被重命名为 shadow-sm,blur-sm 被重命名为 blur-xs,rounded-sm 被重命名为 rounded-xs,等等。旧的 -sm 值现在映射到之前默认的值。
错误(智能体常犯):
<div class="bg-gradient-to-r from-blue-500 to-purple-500"></div>
正确:
<div class="bg-linear-to-r from-blue-500 to-purple-500"></div>
原因: Tailwind v4 将 bg-gradient-to-* 重命名为 bg-linear-to-*,并增加了对其他渐变类型的支持,如 bg-conic-* 和 bg-radial-*。
错误(智能体常犯):
<div class="hover:bg-blue-500">
<!-- 无法专门为非悬停状态设置样式 -->
</div>
正确:
<div class="not-hover:opacity-75 hover:opacity-100"></div>
原因: Tailwind v4 增加了 not-* 变体,用于为不匹配某个条件的元素设置样式。
错误(智能体常犯):
.modal {
opacity: 0;
transition: opacity 0.3s;
}
.modal.open {
opacity: 1;
}
正确:
<div class="starting:opacity-0 opacity-100 transition-opacity duration-300"></div>
原因: Tailwind v4 通过 starting: 变体支持 @starting-style,无需 JavaScript 即可实现纯 CSS 的入场动画。
@theme 代码块中定义所有自定义设计令牌@import "tailwindcss" 作为单一入口点@container + @md:)实现组件级响应式设计bg-blue-500/50、text-gray-900/75@utility 定义自定义实用工具,使用 @variant 定义自定义变体bg-linear-to-* 处理渐变(而非 bg-gradient-to-*)tailwind.config.js,除非你需要基于 JavaScript 的动态配置@tailwind base/components/utilities - 使用 @import "tailwindcss"bg-opacity-*、text-opacity-* - 使用斜杠修饰符语法@layer utilities 定义自定义实用工具 - 使用 @utilitybg-gradient-to-* - 使用 bg-linear-to-*postcss-import 或 autoprefixer - 它们已内置shadow-sm - 它现在是 shadow-xs每周安装次数
62
代码仓库
GitHub 星标数
8
首次出现
2026年2月20日
安全审计
已安装于
gemini-cli62
codex62
cursor62
opencode62
cline62
kimi-cli61
Use this skill when working with Tailwind CSS code. AI agents are trained on Tailwind v3 data and consistently generate outdated patterns - wrong config files, deprecated directives, removed utilities, and verbose class lists. This skill enforces Tailwind CSS v4 patterns.
Wrong (agents do this):
@tailwind base;
@tailwind components;
@tailwind utilities;
Correct:
@import "tailwindcss";
Why: Tailwind v4 removed @tailwind directives entirely. Use a standard CSS @import statement.
Wrong (agents do this):
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: "#3b82f6",
},
spacing: {
18: "4.5rem",
},
},
},
};
Correct:
@import "tailwindcss";
@theme {
--color-brand: #3b82f6;
--spacing-18: 4.5rem;
}
Why: Tailwind v4 uses CSS-first configuration with the @theme directive. No tailwind.config.js needed for most projects.
Wrong (agents do this):
// postcss.config.mjs
export default {
plugins: {
"postcss-import": {},
tailwindcss: {},
autoprefixer: {},
},
};
Correct:
// postcss.config.mjs
export default {
plugins: {
"@tailwindcss/postcss": {},
},
};
Why: In v4, postcss-import and autoprefixer are handled automatically. The plugin is @tailwindcss/postcss, not tailwindcss.
Wrong (agents do this):
<div class="bg-red-500 bg-opacity-50">
<div class="text-blue-600 text-opacity-75"></div>
</div>
Correct:
<div class="bg-red-500/50">
<div class="text-blue-600/75"></div>
</div>
Why: The bg-opacity-*, text-opacity-*, border-opacity-*, and placeholder-opacity-* utilities were removed in v4. Use the slash modifier syntax.
Wrong (agents do this):
<div class="bg-[#3b82f6]"></div>
Correct:
@theme {
--color-brand: #3b82f6;
}
<div class="bg-brand"></div>
Why: Arbitrary values (bg-[#3b82f6]) should be rare. Define custom colors in @theme so they're reusable and consistent.
Wrong (agents do this):
<div class="md:flex-row flex-col"></div>
Correct (when sizing should be based on parent, not viewport):
<div class="@container">
<div class="flex flex-col @md:flex-row">
<!-- Responds to container width, not viewport -->
</div>
</div>
Why: Tailwind v4 has built-in container query support. Use @container on the parent and @sm:, @md:, @lg: variants on children for component-level responsive design.
Wrong (agents do this):
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
Correct:
@utility content-auto {
content-visibility: auto;
}
Why: Tailwind v4 uses @utility directive instead of @layer utilities for custom utilities.
Wrong (agents do this):
// tailwind.config.js
module.exports = {
important: true,
};
Correct:
@import "tailwindcss" important;
Why: The important option moved from config to the CSS import statement in v4.
Wrong (agents do this):
<div class="shadow-sm ring-1 ring-gray-900/5">
<div class="blur-sm">
<div class="rounded-sm"></div>
</div>
</div>
Correct:
<div class="shadow-xs ring-1 ring-gray-900/5">
<div class="blur-xs">
<div class="rounded-xs"></div>
</div>
</div>
Why: In v4, shadow-sm was renamed to shadow-xs, shadow to shadow-sm, blur-sm to blur-xs, rounded-sm to rounded-xs, etc. The old -sm values now map to what was previously the default.
Wrong (agents do this):
<div class="bg-gradient-to-r from-blue-500 to-purple-500"></div>
Correct:
<div class="bg-linear-to-r from-blue-500 to-purple-500"></div>
Why: Tailwind v4 renamed bg-gradient-to-* to bg-linear-to-* and added support for other gradient types like bg-conic-* and bg-radial-*.
Wrong (agents do this):
<div class="hover:bg-blue-500">
<!-- No way to style non-hovered state specifically -->
</div>
Correct:
<div class="not-hover:opacity-75 hover:opacity-100"></div>
Why: Tailwind v4 added the not-* variant for styling elements that do NOT match a condition.
Wrong (agents do this):
.modal {
opacity: 0;
transition: opacity 0.3s;
}
.modal.open {
opacity: 1;
}
Correct:
<div class="starting:opacity-0 opacity-100 transition-opacity duration-300"></div>
Why: Tailwind v4 supports @starting-style via the starting: variant for CSS-only entry animations without JavaScript.
@theme blocks@import "tailwindcss" as the single entry point@container + @md:) for component-level responsive designbg-blue-500/50, text-gray-900/75@utility for custom utilities, @variant for custom variantsbg-linear-to-* for gradients (not bg-gradient-to-*)tailwind.config.js unless you need JavaScript-based dynamic config@tailwind base/components/utilities - use @import "tailwindcss"bg-opacity-*, text-opacity-* - use slash modifier syntax@layer utilities for custom utilities - use @utilitybg-gradient-to-* - use bg-linear-to-*postcss-import or with v4 - they're built inWeekly Installs
62
Repository
GitHub Stars
8
First Seen
Feb 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli62
codex62
cursor62
opencode62
cline62
kimi-cli61
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
123,700 周安装
Rust元认知并行分析工具 - 三层并行认知分析解决编程问题
511 周安装
lesson-learned:AI代码分析工具,从Git变更中提取软件工程经验与最佳实践
510 周安装
Convex 认证设置指南:集成 Auth0、Clerk、WorkOS 实现安全用户管理
510 周安装
代码简化工具 - 自动优化代码可读性,保持行为不变 | AI辅助开发
526 周安装
Angular Core 核心架构深度解析:Ivy渲染、依赖注入与变更检测机制
541 周安装
AI SDK UI React Hooks:Vercel AI SDK v6 前端开发与智能体集成指南
517 周安装
autoprefixershadow-sm when you mean the smallest shadow - it's now shadow-xs