vue2 老项目改造使用 tailwindcss 踩坑记录
背景
有个老的项目，想要改造成使用 tailwindcss，这个项目的技术栈是：
- 前端框架为vue2
- 使用 webpack 作为打包工具
- 使用了 postcss 和 sass
开始改造
在这个前提下，我根据官网的 postcss 的指引进行安装处理，这里是官网的链接：Using PostCSS
1. 安装 tailwindcss 相关依赖比初始化
项目已经安装了 postcss autoprefixer，所以我只安装了 tailwindcss
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init # 自动创建 tailwind.config.js 文件2. 调整项目中已有的 postcss.config.js 文件
// postcss.config.js 文件调整前
module.exports = {
"postcss-import": {},
"postcss-url": {}
}
// postcss.config.js 文件调整后
module.exports = {
"postcss-import": {},
"postcss-url": {},
"tailwindcss": {},
"autoprefixer": {}
}3. 配置 tailwind.config.js 文件，默认文件的 content 参数是个空数组
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"], // 从 [] 改成 ["./src/**/*.{html,js}"]
theme: {
extend: {},
},
plugins: [],
}4. 添加 tailwind 的指令到项目中
项目原来没有在 main.js 的入口文件中导入 css 主文件，所以这里创建导入一下。
/* main.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;然后导入到项目的入口 main.js 文件中
// src/main.js
// 其他 import 内容...
import '../assert/scss/main.scss' // 导入 scss
// 其他代码逻辑...出现的问题和解决方案
完成上述操作后，我开始启动项目的开发环境
项目启动报错
执行一下开发启动命令：
npm run dev好的，开始报错，大致的关键字段如下，报错的位置都是 vue 文件：
Error loading PostCSS config: true is not a PostCSS plugin
Error loading PostCSS config: Invalid PostCSS Plugin tailwind
TypeError: Invalid PostCSS Plugin found at: plugins[0]根据这两个关键报错开始 Google，找到第一篇关键信息，它让我开始考虑是否是依赖版本的问题：Tailwind 3.0 - Invalid PostCSS Plugin found at: (tailwindcss, autoprefixer) #7042
在这个基础上，继续 Google，并且优先关注 StackOverflow 的同类文章，里面也提到一个点，调整 postcss.config.js 的配置格式，事后验证该方法对我无效：TypeError: Invalid PostCSS Plugin found at: plugins[0]：
将下面的格式：
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
]
};改为：
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
]
};改完无效，那继续找方案。我注意到我的 postcss 版本 就是 8.x 的，所以我关注到了这个问答标题，里面经过 aimme 编辑，由 Khalid EDAIG 创建的回答解决了我的问题：Error: PostCSS plugin tailwindcss requires PostCSS 8，里面提到重装相关的依赖：
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9我重装了依赖，然后为了确保所以依赖都正确，我删除了 node_modules，然后重新 npm install
注意，这是一个降级方案，因为 vue2 不支持 postcss8，所以安装完实际上是使用的 tailwind2.2.17，而非 3.x 版本
经过以上操作，成功启动了项目，并且在页面中成功应用了 tailwindcss
启动完成后样式异常
启动是能启动了，但是样式确有些变化，原来公司内部的 UI 库受到了影响，原来一个横向滚动的 tab 组件设置了 overflow: hidden 但没有生效，导致内容展示了出来。
首先肯定是因为引入了 tailwindcss 导致的，所以我尝试逐个引入的配置进行调整，先确认下是否是因为样式覆盖，在 main 文件中先注释掉了 tailwindcss 的引入文件，果然就好了！
那就简单了，查查资料，最终找到了官方的文档说明：Disabling Preflight 禁用预检
照着配置一下，重启，ok，开始开发业务需求去了。
// tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
// 新增这下面的部分：
corePlugins: {
preflight: false,
}
}同样的配置，在另一个项目发现样式干扰
后面在其他老项目，用同样的方式，发现了又有坑。在某些其他人写的页面中，看到了表格样式错位的问题。
开始一个个 tailwind 的样式进行屏蔽，最后发现是在全文档引入的 @tailwind utilities 影响。这个 utilities 里面是 tailwindcss 中使用的各种类。
我觉得是 tailwind 覆盖到某些样式了，所以把涉及这个导入的 css 导入放到了 main.js 中的最前面，然而，依旧没有什么用，表格的样式没有恢复正常。
这就奇怪了，我已经在 tailwind 的配置文件中将 preflight 设为了 false，但是依旧受到了影响。这是为什么呢？
我删除了 node_modules 并重新 npm install，还是不行。
我开始检查代码，突然发现，受影响的表格中，它有一个类名是 table ……
原来是有人写了这么个类名，刚好和 tailwindcss 的类名冲突了，难怪了。
查了下有什么解决方案，我一开始还曾经怀疑过作用域，不过现在定位到了，直接找方案即可，最终，我找到了如下方案：
在 tailwind 的配置文件中，加多一个前缀的配置项（这里查看官方关于前缀的说明），配置了前缀后，本来 tailwind 的 m-1 w-full 之类的需要在前面加上前缀，比如设置前缀为 tw-：
/** @type {import('tailwindcss').Config} */
export default {
prefixe: "tw-", // 加多这一项，设置前缀为 "tw-"
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}然后原来的 table 就不会受到影响了，前面提到的 m-1 w-full 要生效需要写为 tw-m-1 tw-w-full 才会生效。不过因为我配置了 vscode 的自动提示，我设置了前缀后，它还是能够做到自动提示，所以开发体验还是很好的。
补充：这里是我设置的 vscode 的配置文件内容，文件在项目根目录中的位置为 ./.vscode/settings.json
{
"files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": "on"
},
"css.lint.unknownAtRules": "ignore"
}- files.associations 告诉编辑器总是使用 tailwind 的模式打开 css 文件
- editor.quickSuggestions 让编辑器在编辑文本类型的时候，会触发快速提示
- css.lint.unknownAtRules 忽略在 css 中的报错，Eslint 会在 css 内提示找不到 tailwind 的指令 @tailwind