Tailwind与自定义CSS结合可提升开发效率与代码可维护性：使用@apply合并重复类，扩展theme支持品牌值，组件中混合工具类与scoped样式，高频样式封装为插件。分工明确，高效灵活。
Tail
win
d CSS 提供了实用优先的原子类系统，能快速搭建界面，但在复杂项目中，完全依赖工具类会让 HTML 变得冗长，也难以维护。将 Tailwind 与自定义 CSS 样式结合，既能享受其开发效率，又能保持代码清晰和可扩展性。
使用 @apply 组织重复样式
当你发现多个元素使用相同的 Tailwind 类组合时，可以用
@apply
将这些类合并到一个自定义 CSS 规则中，避免模板重复。
例如：
在你的 CSS 文件中：
然后在 HTML 中直接使用：
立即学习
“
前端免费学习笔记（深入）
”；
这样既保留了 Tailwind 的设计约束，又提升了可读性和复用性。
扩展 Tailwind 主题以支持自定义值
如果需要加入品牌色、字体或间距等非默认值，可以通过配置
tailwind.config.js
扩展主题，让自定义值融入 Tailwind 体系。
Trae win
Trae Windows 官方版本现已全面支持 Win10 和 Win11 系统（64位）。国内开发者可直接访问 Trae 中文官网（trae.cn 或 trae.com.cn），一键下载官方正版 .exe 安装包，享受国内直连的高速稳定体验。安装过程极其简便，双击即可运行，并支持一键无缝导入 VS Code 或 Cursor 的原有主题、快捷键及插件配置。登录支持手机号、微信或稀土掘金账号。内置免费的豆包与 DeepSeek 等顶级大模型，让你开箱即用，轻松开启高效的 AI 智能编程之旅。
下载
比如添加主色调：
之后就能在类名中使用
或
，像原生 Tailwind 类一样工作。
在组件中混合使用工具类与 scoped 样式
在现代
前端
框架（如 Vue、React）中，可以在组件内保留常用布局用 Tailwind 类，对复杂动画或特殊结构使用 scoped 或 module CSS。
示例（Vue）：
这种模式让结构和布局由 Tailwind 控制，视觉细节由 CSS 补充。
创建可复用的组件类并注册为插件
对于高频使用的复合样式（如卡片、模态框），可以封装成插件，在
tailwind.config.js
中通过
addComponents
注册。
示例：
之后就能在任意地方使用
，样式仍受 Tailwind 主题影响，且构建时会被 PurgeCSS 识别保留。
基本上就这些。Tailwind 不排斥自定义 CSS，关键是把两者分工明确：Tailwind 负责基础样式和布局，自定义样式处理抽象组件、动画和品牌细节。合理结合能让项目既高效又灵活。
.btn-primary {
@apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;
}
.btn-secondary {
@apply bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600;
}
module.exports = {
theme: {
extend: {
colors: {
'brand': '#FF6B35',
},
spacing: {
'128': '32rem',
}
},
},
}
bg-brandml-128
标题
动效内容
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addComponents }) {
addComponents({
'.card': {
'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
'background-color': '#fff',
'border-radius': '0.5rem',
'padding': '1rem'
}
})
})
]
}
class="card"