Vue3项目里怎么用好TailwindCSS？踩坑了怎么办？

先搞懂为什么现在越来越多人把这俩搭在一起用

现在打开前端技术社区的新帖,十篇Vue3项目分享里可能有七八篇配的是TailwindCSS，这不是偶然的跟风，之前用原生CSS或者Less/Sass的时候，要么得手动建一堆语义化类名库，要么会写一堆嵌套层级深到得数括号的代码，改一个按钮的圆角甚至得翻三四个文件，但TailwindCSS不一样，它是原子化CSS的代表，就是把样式拆成最小的、可复用的单个类，比如px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600，你直接在Vue组件的template标签里写就行，不用再在style标签里单独写.btn-primary { /* 一堆样式 */ }这种东西。

而且和Vue3的结合简直是天作之合——Vue3的Composition API本来就是让你把逻辑抽离复用，TailwindCSS的原子类是让你把样式抽离复用，搭配起来不管是写业务组件还是通用组件，效率都能提一大截，现在很多主流的UI组件库，比如Element Plus、Ant Design Vue，都已经有官方或者社区维护的TailwindCSS适配版本了，不用再自己花时间调样式对齐，拿来就能用。

从零开始：在Vue3项目里正确配置TailwindCSS的步骤

很多新手一开始会直接用npm install tailwindcss就完事儿了，结果写了类名一点效果都没有，或者打包出来的CSS特别大，正确的配置其实分两种情况，一种是用Vite创建的新Vue3项目，另一种是已经用Webpack或者Vue CLI创建好的旧项目，咱们分开说。

先说最主流的Vite创建的新Vue3项目,步骤其实很简单：

1. 先在项目根目录下运行npm install -D tailwindcss postcss autoprefixer，这里注意postcss和autoprefixer是必须要装的，不然TailwindCSS的一些高级特性（比如颜色渐变、浏览器前缀自动补全）用不了。
2. 运行npx tailwindcss init -p，这一步会自动生成两个配置文件，tailwind.config.js和postcss.config.js，不用你手动改太多。
3. 打开tailwind.config.js，找到content这个数组，把里面的空内容改成['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']——这个很关键！TailwindCSS只会扫描你指定的这些文件里的类名，然后只把用到的类打包进最终的CSS文件里，不然默认会把所有原子类都打包，体积可能会有好几MB。
4. 打开src目录下的主CSS文件（一般是main.css或者style.css），把里面原来的内容都删掉，换成TailwindCSS的三行指令：@tailwind base; @tailwind components; @tailwind utilities;。
5. 最后在main.js或者main.ts里引入这个主CSS文件，就可以直接用了。

再说说旧项目的适配,比如Vue CLI4+或者Webpack5的项目，步骤稍微复杂一点，但核心逻辑是一样的：

1. 同样先装那三个依赖包：npm install -D tailwindcss postcss autoprefixer。
2. 生成配置文件：npx tailwindcss init -p。
3. 修改tailwind.config.js的content数组，加上所有可能用到原子类的文件路径。
4. 在主CSS文件里加上那三行指令并引入到入口文件。
5. 额外的一步是检查项目里的PostCSS配置,比如Vue CLI项目可能会有vue.config.js里的PostCSS插件设置，或者单独的.postcssrc.js文件，要确保TailwindCSS和autoprefixer被正确添加到PostCSS插件列表里，而且顺序不能错：TailwindCSS要放在autoprefixer前面。

用好TailwindCSS的几个实用小技巧，不是只会用基础类

很多人用TailwindCSS只会停留在用bg-red-500、mt-4这种基础类的阶段，其实它还有很多高级特性，用好了能让你的代码更优雅、效率更高。

第一个技巧是自定义配置,比如你做的是公司内部的项目，有自己的品牌色、字体、间距规范，这时候就可以改tailwind.config.js里的theme对象，比如你可以把品牌蓝色改成#2563eb之外的颜色，只要在theme.extend.colors里加个键值对就行，比如brand: { 50: '#eff6ff', 500: '#1d4ed8', 700: '#1e40af' }，这样你在模板里就可以直接写bg-brand-500了，而且extend的好处是不会覆盖TailwindCSS原来的配置，你原来的bg-blue-500还是能用的。

第二个技巧是用@apply指令写自定义组件类，虽然TailwindCSS提倡直接在模板里写原子类，但有时候你会遇到重复写很多原子类的情况，比如项目里所有的主按钮都要用到px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 active:bg-brand-700 transition-colors，这时候你就可以在主CSS文件的@tailwind components;和@tailwind utilities;之间加一个自定义类：

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-brand-500 text-white rounded-lg hover:bg-brand-600 active:bg-brand-700 transition-colors;
  }
}

这里一定要加@layer components，不然自定义类的优先级可能会出问题，而且还能让TailwindCSS在打包的时候优化这个类。

第三个技巧是用响应式断点,TailwindCSS默认有五个断点：sm（640px以上）、md（768px以上）、lg（1024px以上）、xl（1280px以上）、2xl（1536px以上），你可以直接在原子类前面加这些前缀，比如md:flex-col，意思就是在768px以上的屏幕上把元素的flex方向改成垂直排列，而且你还可以在tailwind.config.js的theme.extend.screens里自定义断点，比如加个tablet对应800px，这样更符合你项目的设计稿。

第四个技巧是用深色模式,TailwindCSS支持两种深色模式切换方式：一种是基于系统设置的media模式，另一种是基于HTML标签class属性的class模式，推荐用class模式，因为你可以在项目里给用户加个切换按钮，配置方式也很简单，在tailwind.config.js的顶层加个darkMode: 'class'，然后在模板里写原子类的时候加个dark:前缀就行，比如dark:bg-gray-900 dark:text-white，切换的时候只要用JavaScript给HTML标签加或者移除dark类就可以了，Vue3里可以用ref和watchEffect配合localStorage来实现，很方便。

Vue3项目里用TailwindCSS常见的几个坑，教你怎么快速解决

踩坑是每个学新技术的人都会经历的,下面我整理了几个新手甚至老前端都会遇到的TailwindCSS和Vue3结合的坑，附带着解决办法，帮你少走弯路。

第一个坑是类名没生效,这个是最常见的，原因一般有三个：一是tailwind.config.js的content数组路径没配对，比如漏了src目录下的某个子文件夹；二是主CSS文件没正确引入到入口文件；三是你用了动态类名，比如class="bg-${color}-500，这里要注意，TailwindCSS只会扫描静态的字符串类名，不会扫描动态拼接的，所以如果要用动态类名，要么把所有可能用到的类名都列出来放在content数组的safelist里（比如safelist: ['bg-red-500', 'bg-blue-500', 'bg-green-500']），要么用style属性来写动态样式（比如style="{ backgroundColor: colorMap[color] }"，提前定义好一个colorMap对象）。

第二个坑是打包出来的CSS体积太大,这个原因也有三个：一是content数组路径没配全，导致TailwindCSS扫描不到所有文件，以为你要用所有类；二是你用了太多没有用到的@layer自定义类；三是你没开启压缩，虽然Vite和Vue CLI生产环境默认会压缩，但有时候可能会因为配置问题关掉，记得检查一下。

第三个坑是优先级冲突,比如你用了@apply自定义类，然后又在模板里加了一个同名的原子类，或者和Element Plus等UI组件库的样式冲突了，解决同名原子类和自定义类冲突的办法是利用TailwindCSS的!important前缀，比如!text-red-500，这个类的优先级会非常高，基本能覆盖所有普通样式，解决和UI组件库冲突的办法，要么是用UI组件库的TailwindCSS适配版本，要么是给UI组件库的组件加个class或者deep()（Vue3里是deep()，Vue2里是:v-deep或者/deep/）来覆盖样式，比如deep(.el-button) { @apply px-4 py-2; }。

第四个坑是开发环境正常,生产环境样式错乱，这个一般是因为生产环境用了Tree Shaking，把TailwindCSS用到的一些类给摇掉了，或者是动态类名的问题（刚才第一个坑已经说过了），解决Tree Shaking摇掉类的办法，同样是把用到的类名放在content数组的safelist里。

Vue3和TailwindCSS是不是真的适合你的项目？

咱们来客观聊一聊这个问题——不是所有项目都适合用TailwindCSS和Vue3的组合，如果你的项目是一个小项目，比如个人博客、小型管理后台，或者是时间紧、任务重的MVP产品，那这个组合绝对是首选，能让你快速出活，但如果你的项目是一个超大型的、有几十上百人开发的企业级项目，而且有非常严格的语义化规范，那可能还是用Less/Sass加上自定义的语义化类名库更合适，因为超大型项目里原子类太多的话，模板会显得比较乱，多人协作的时候也容易出现命名混乱的情况（不过现在有Tailwind CSS IntelliSense插件，能自动补全类名，还能显示类名对应的样式，能缓解这个问题）。

Vue3和TailwindCSS的组合是现在前端开发的趋势之一,掌握了它能让你在很多项目里提高效率，少写很多重复代码，希望这篇文章能帮到你，如果你还有其他关于Vue3和TailwindCSS的问题，欢迎在评论区留言讨论。