建议收藏 | Tailwind CSS使用技巧

▌ 技术引导 Tailwind CSS 使用技巧，我见过最多人卡在动态样式、全局配置和性能优化这几个点上。动态样式要用 `@apply` 和 `@layer` 起码要结合 `theme()` 函数，不然你会发现它根本无法正确继承或覆盖。全局配置也别直接在 `tailwind.config.js` 里硬写，用 `theme.extend` 会更灵活，特别是处理自定义颜色和字体。性能方面，用 `purge` 清理未使用类和 `preflight` 避免全局样式冲突是必须的，否则你可能会看到页面加载变得卡顿。还有，那些人用 `tailwindcss` 时没注意标准化，把 `@media` 写在 `@apply` 里，最后发现浏览器不识别，这就是典型坑。我见过有开发者直接改 `tailwind.config.js` 里的 `content` 路径，结果没清理缓存，导致改动没生效。所以，讲技巧，就讲这些：配置、动态、性能、兼容性，这四个问题搞好了，Tailwind CSS 用起来才真的顺手。 别光看文档，文档写得再好，你要是没用工具链，那 `tailwindcss` 的 `purge` 也不会自动识别你的新类。我见过有人在 `postcss.config.js` 里加 `tailwindcss` 插件，结果没配 `content`，导致所有 CSS 都被打包进去，体积超标。还有 `postcss-preset-env` 这个插件，得配 `stage` 参数，不然你写的 `@media` 或 `@layer` 可能根本不会生效。如果你用的是 Vite，记得 `tailwindcss` 是默认支持的，但 `postcss` 配置还是得亲自摸一遍。 配置文件 `tailwind.config.js` 里 `theme.extend` 是你的救星，别把它当 `theme.extend` 就是 `theme.extend`，它会自动合并到全局样式里。我见过有人在 `theme.extend` 里直接写 `colors: { ... }`，结果颜色名称不匹配，导致样式没被应用。得注意命名规范，比如 `brand` 颜色名要符合 `color` 的格式，不然浏览器会把你的自定义颜色当普通类处理。如果你用的是 `@layer`，记得它必须在 `@tailwind base` 和 `@tailwind components` 之间，否则样式可能会被覆盖。 动态样式和配置函数是 `tailwindcss` 最强大的地方，但也是最容易被忽略的。比如你写 `@apply` 的时候，如果里面用了 `text-[#333]`，就别指望 `theme` 会帮你合并，得手动引入变量。我见过有人用 `config` 写了个颜色变量，但没在 `tailwind.config.js` 里配置，结果 `text-[#333]` 一直没变。还有 `@layer` 这个功能，能帮你处理 `@media` 的嵌套，但得选对 `layer` 名称，否则你可能会遇到样式冲突。 性能优化方面，用 `tailwindcss` 的默认 `purge` 配置，配合 `content` 路径，能帮你减少 60% 以上的冗余代码。但如果你用的是 `@layer`，得确保它没有覆盖 `@tailwind` 的默认行为。实际测试发现，`@layer` 如果写在 `@tailwind base` 后面，可能会导致 `tailwind` 的 `text-sm` 等类失效。所以，配置顺序很重要，切记别乱写。 ▌ 技术参考 一 配置文件的正确姿势 尾wind配置文件 `tailwind.config.js` 可以通过 `extend` 扩展，而不是直接覆盖。比如你要定义新颜色，用 `colors: { brand: '#333' }` 就不行，得写成 `theme.extend.colors.brand = '#333'`。另外，`content` 的路径要写全，比如 `./src//.{js,ts,jsx,tsx,md,mdx}`，否则 `purge` 会漏掉你写的类。我见过有人把 `content` 设置成 `./pages//.{js,jsx}`，结果组件里的 `@apply` 没被扫描到，最终没被加入 CSS。 二 动态样式与 `@apply` 的最佳实践 `@apply` 是用来复用类的，但你得注意它和 `@layer`、`@media` 的组合方式。比如如果你在组件里用 `@apply text-[#333]`，这个 `#333` 不会被 `theme` 合并，必须提前在 `tailwind.config.js` 里定义好变量，或者直接用 `theme()` 函数调用。比如 `@apply text-[theme('colors.brand')]`，这种写法会根据配置里的 `colors.brand` 变量动态生成颜色值。别以为 `@apply` 就能简化一切，它还是依赖你的 CSS 命名习惯。 三 `@layer` 的使用陷阱 `@layer` 是用来管理样式优先级的，但要用对。比如 `@layer base, components, utilities`，这个顺序是绝对不能乱的，否则你写的 `text-sm` 等基础类可能被覆盖。我见过有人把 `@layer` 写在 `@tailwind components` 之后，结果整个页面的样式都变了。还有一种情况是，如果你用 `@layer` 嵌套 `@media screen`，必须确保 `media` 写法正确，否则浏览器会忽略。比如 `@media screen and (min-width: 640px)`，而不是 `@media (min-width: 640px)`，后者虽然能运行，但优先级可能有问题。 四 `theme()` 函数的深度应用 `theme()` 函数其实可以搞定很多动态效果，尤其是配合 `tailwind.config.js` 里的变量。比如你定义了 `colors: { brand: '#333' }`，在组件中用 `text-[theme('colors.brand')]`，这样颜色值会根据配置自动替换。但别忘了 `theme()` 也接受参数，比如 `theme('colors.brand', 'dark')` 可以在 `dark` 模式下动态切换颜色。这在某些项目中是个好工具，特别是在需要条件渲染的场景里，比如 `hover:scale-105` 要结合 `theme()` 才能实现动态渐变。 五 `purge` 和 `content` 配置的实战经验 `purge` 会帮你删除未使用的类，但配置好 `content` 是关键。比如 `content: ['./src//.{js,ts,jsx,tsx,md,mdx}']`，这个路径要确保你的所有组件和页面文件都包含进去。否则你可能会看到 `hover:text-red-500` 这样的类在最终 CSS 里存在，即便你没用过。我见过有人直接删除 `purge` 的配置，结果 CSS 文件膨胀到 1MB 以上，加载速度变慢。 六 `@media` 和 `@layer` 的组合 写 `@media` 时，如果放在组件里，必须用 `@layer` 包裹，否则可能不会生效。比如 `@layer base { @media screen and (min-width: 640px) { ... } }`，这个写法能确保 `@media` 的样式在正确的位置生效。但别把 `@media` 写在 `@layer` 外，否则你可能会遇到样式被覆盖的问题。我见过有人写 `@media (min-width: 640px)`，结果 `tailwind` 的默认媒体查询没被识别，导致样式失效。 七 `darkMode` 的配置与使用 `darkMode` 要配置成 `class` 或 `media`，但别随便选。我见过有人用了 `media`，结果在某些浏览器里 `preflight` 会失效，导致暗色模式没激活。如果你用的是 `class`，那么 `html` 标签需要添加 `dark` 类，比如 ``，这样才会触发所有 `dark:` 前缀的类。此外，`darkMode` 的配置要和 `tailwind.config.js` 里的 `darkMode` 保持一致，否则 `preflight` 会出错。 八 `@apply` 的性能影响 `@apply` 虽然方便，但滥用会导致 CSS 文件体积变大。比如你用 `@apply p-4` 表示 padding，但实际 CSS 文件会生成多个独立的类，比如 `.p-4`、`.p-4: hover` 等，这样反而会增加冗余。我见过有人在项目里用了大量 `@apply`，结果 CSS 体积暴涨，页面加载变得很慢。所以，建议在组件中尽量用 `@apply`，但在主 CSS 文件里要避免，除非你真的需要复用。 九 `@keyframes` 和 `@layer` 的搭配 如果你用的是 `@keyframes`，必须确保它被 `@layer` 包裹，否则你可能会遇到动画不生效的问题。比如 `@layer base { @keyframes move { ... } }`，这样动画会在 `base` 层里被正确应用。不过，`@keyframes` 不会被 `purge` 清理，除非你手动配置 `purge` 的 `keyframes` 选项，这样能进一步减少 CSS 文件大小。 十 `tailwindcss` 和 `postcss` 的协同 `postcss` 是必须的，特别是在处理 `@layer`、`@media` 和 `@keyframes` 的时候。比如你在 `postcss.config.js` 里配置了 `postcss-preset-env`，记得加 `stage: 2`，否则 `@layer` 可能不会被识别。另外，`tailwindcss` 的 `purge` 依赖 `postcss` 的 `content` 配置，所以别忘了把 `tailwindcss` 作为 `postcss` 的插件。 十一 `@apply` 与 `@layer` 的兼容性问题 `@apply` 和 `@layer` 的组合可能引发一些兼容性问题，特别是在某些旧版本的 `tailwindcss` 中。比如你用 `@apply` 进行条件渲染，但 `@layer` 没有正确设置位置，导致样式被覆盖。我见过有人在 `@layer utilities` 中使用 `@apply`，结果 `tailwind` 的默认 `utilities` 类被压入了 `layer` 中，最终样式混乱。所以，`@layer` 的位置和 `@apply` 的使用要谨慎搭配。 十二 `@media` 的常见错误 `@media` 常见错误是写法不对。比如 `@media (min-width: 640px)` 就是错的，正确的写法是 `@media screen and (min-width: 640px)`。这个错误在实际项目中导致样式不生效，特别是在 `@layer` 包裹的情况下。另外，如果你用的是动态 `@media`，比如结合 `@apply`，必须确保 `@media` 的结构正确，否则浏览器根本不会处理。 十三 `tailwindcss` 的 `preflight` 配置 `preflight` 是用来处理全局样式冲突的，比如重置 `margin` 或 `padding`。如果你没配置 `preflight`，可能会导致 `tailwind` 的样式被浏览器默认样式覆盖。比如 `preflight: true` 会自动引入 `@tailwind preflight`，但如果 `preflight` 没有正确配置，你的样式可能会有偏差。我见过有人设置了 `preflight: true`，结果 `text-sm` 的字体大小变大了，这说明他们的 `preflight` 没有正确应用。 十四 `@layer` 的优先级与顺序 `@layer` 的顺序决定了样式的优先级。比如 `@layer base, components, utilities` 这个顺序是默认的，但如果你在 `components` 层里定义了 `@apply`，可能会覆盖 `base` 层的样式。我见过有人把 `@layer` 写在 `@tailwind components` 之后，结果自己的样式被覆盖。所以，记住一点：`@layer` 的顺序直接影响 `tailwind` 的行为，别随便动。 十五 完整配置文件的示例 `tailwind.config.js` 的完整配置例子： ```js module.exports = { content: ['./src//.{js,ts,jsx,tsx,md,mdx}'], theme: { extend: { colors: { brand: '#333', }, }, }, plugins: [], darkMode: 'class', variants: { extend: { borderColor: ['hover', 'focus'], }, }, } ``` 注意 `content` 的路径，`darkMode` 配置要和 `html` 标签一致，`theme.extend` 是扩展全局样式的关键，别直接改 `theme`，这样会破坏 `tailwind` 的默认行为。