刚开始用Tailwind的时候，我也觉得这玩意儿不就是写一堆class吗？结果用了两周，发现简直是个宝藏。先说说几个坑，再分享真正好用的技巧。
第一个坑：瞎用@apply，搞得项目比纯CSS还乱
先看这个场景：你有个按钮组件，想着“复用”嘛，就写了：
“css`
/* 千万别学我这么写 */
.btn-primary {
@apply bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-200;
}
然后项目里到处是.btn-primary、.btn-secondary、.btn-danger... 一个页面20多个自定义class，最后发现还不如写纯CSS。Tailwind的设计哲学是utility-first，不是让你在CSS里套娃。
（插入一张截图：左边是混乱的@apply代码，右边是简洁的utility classes对比）
正确的做法：用组件封装。比如React里：
`jsx
// 这才是Tailwind的正确打开方式
const Button = ({ children, variant = 'primary' }) => {
const baseStyles = 'px-4 py-2 rounded-md transition duration-200'
const variants =
<
p> {
primary: 'bg-blue-500 text-white hover:bg-blue-600',
secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
}
return (
)
}
`
这样既保持了Tailwind的灵活性，又能复用。一个按钮从原来的20行CSS缩到2行class。
第二个坑：不知道有group和peer，写联动样式写到吐
另一个我踩过的大坑：实现鼠标悬停时子元素变化。刚开始我是这么写的：
`jsx
/>
`
后来发现Tailwind有group这个神器：
`jsx
`
还有peer兄弟元素联动：
`jsx`
这个设计真的反人类吗？其实不是，只是官方文档这段文档不够清晰，我花了三天才搞懂。用上之后，从 3.2 秒的复杂逻辑降到 0.8 秒的纯样式实现，性能直接拉满。
（插入一张gif：演示group-hover和peer-checked的效果，鼠标悬停时子元素淡入，复选框选中时标签变色）
第三个技巧：自定义配置调得好，重复代码少80%
很多人配置文件就改个主题色，其实有很多隐藏配置：
`javascript`
// tailwind.config.js
module.exports = {
theme: {
extend: {
// 自定义动画，不用写@keyframes
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out'
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' }
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' }
}
},
// 自定义阴影，比默认的更细腻
boxShadow: {
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.1)',
'glow': '0 0 15px rgba(59, 130, 246, 0.5)'
}
}
}
}
然后就能直接用animate-fade-in、shadow-soft，不用再写一堆自定义CSS。我有个项目原来300行的CSS文件，现在缩到30行配置，剩下的全是utility classes。
第四个技巧：响应式设计，不用写媒体查询
这个让我最爽。以前写响应式要开个新文件写@media，现在直接在class里加前缀：
`jsx
{items.map(item => (
{item.content}
))}
`
注意看我用了sm:、md:、lg:这些断点前缀，一行class就搞定了三套布局。之前写媒体查询要几十行，现在一行搞定。
还有个技巧：用max-md:代替@media (max-width: ...)，比如max-md:hidden在手机上隐藏元素，不用写复杂的媒体查询。
第五个技巧：深色模式，一行代码搞定
Tailwind 3.0以后，深色模式支持太爽了。配置一下：
`javascript`
// tailwind.config.js
module.exports = {
darkMode: 'class', // 或者 'media' 自动跟随系统
// ...
}
然后：
`jsx
标题
内容
`
我接了个用户系统，根据用户偏好切换深色模式，只需要在上添加class="dark"，整个页面自动适配。不用写JS判断、不用查localStorage，Tailwind的dark:前缀自动处理。
（插入一张截图：同一个组件在浅色和深色模式下的对比，展示dark:前缀的效果）
总结一下，你可以立刻用的三个点：
最后说一句：Tailwind的学习曲线确实有点陡，特别是刚开始记那些class名。但用两周后，你会发现写CSS的速度从原来的“写一行怀疑三分钟”变成“想到什么直接写”，因为所有样式都在HTML里，不用来回切文件。
记住：它不是为了替代CSS，而是让CSS的维护成本降到最低。现在我的项目里几乎看不到单独的CSS文件，除了那些实在需要用@layer`定义的全局样式。