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,
  }
}