0、前言

最近打算给公司一个 vue-cli4 创建的 vue2 项目加点新鲜的血液

之前已经升级到 vue2.7 了

这回打算加一个新的 css 引擎：TailwindCSS

1、开干！

查了一下 vue-cli 自带 postcss

ok，那就照着官网的 postcss 教程来

安装库

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

创建 postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

修改 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

引入 CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

npm，启动！

npm run dev

很好，报错了

让我康康是什么问题？

原来是 TailwindCSS 要求 PostCSS 8，而 vue-cli 安装的是 PostCSS 7

淦，我就知道不会这么顺利

2、 再战

左搜搜，右搜搜，找到了掘金的一篇文章：

开整！

这回安装 PostCSS 7 相关的 TailwindCSS 套件

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

postcss.config.js 和 tailwind.config.js 没什么变化

略过

css 变成了一个

// main.js
import "tailwindcss/tailwind.css"

npm，启动！（再次）

奈斯，这回看起来还是不错的

就是有不少样式冲突的问题：

element-ui 的 v-loading 的加载转圈圈跑到左边去了

• 

• 因为 TailwindCSS 的默认样式将 svg 的 dislplay 改成了 block

element-ui 文件上传的图标怎么也飞了？

• 

• 因为 TailwindCSS 同样将 img 的 dislplay 也改成了 block

有些地方还出现了一些点，什么情况？

• 

• 因为使用了 list-item 这个类，在 TailwindCSS 中是 display:list-item 的效果

还有几个问题就不啰嗦了。。。

解决方法也简单

修改配置文件，用 corePlugins 屏蔽掉对应的模块即可

/** @type {import('tailwindcss').Config} */
module.exports = {
    corePlugins: {
        preflight: false, // 关闭预设样式
        container: false, // 关闭 container容器 模块（ .container 类冲突了）
        display: false, // 关闭 display 模块（ .list-item 类冲突了）
    },
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
};

但是因为 display 模块其实只是想干掉 list-item 类，所以我们再手动把别的加回来

.block {display: block;}
.inline-block {display: inline-block;}
.inline {display: inline;}
.flex {display: flex;}
.inline-flex {display: inline-flex;}
.table {display: table;}
.inline-table {display: inline-table;}
.table-caption {display: table-caption;}
.table-cell {display: table-cell;}
.table-column {display: table-column;}
.table-column-group {display: table-column-group;}
.table-footer-group {display: table-footer-group;}
.table-header-group {display: table-header-group;}
.table-row-group {display: table-row-group;}
.table-row {display: table-row;}
.flow-root {display: flow-root;}
.grid {display: grid;}
.inline-grid {display: inline-grid;}
.contents {display: contents;}
/*.list-item {display: list-item;}*/
.hidden {display: none;}

3、成功了？

TailwindCSS 和项目的冲突解决的差不多了，看来可以写代码了

整上 VSCode 的 TailwindCSS 代码提示

（其实我用的 webstorm 天然支持，这是给使用 vscode 的同事找的）

class 记得不太熟练，上网找个小抄网站：

万事俱备，代码开敲！

..........

..........

诶？我这写了个任意值咋不生效呢？

是我 PostCSS 没整对吗

（发挥搜商，知乎、百度、掘金、谷歌、devv。。。。。。。）

（发现了几篇文章，开始各种试）

（不停的 npm run dev 。。。。）

还是不行，找 AI 问问

(又去找 Kimi、GPTs 聊了半天)

(还是不行)

4、原来有些事，从一开始就注定了

搜了半天还是不行，最终我开始研究我引入的库：@tailwindcss/postcss7-compat

放入谷歌搜索一下

让我看看官方文档里写了么什么

从 v2.0 开始，Tailwind CSS 依赖于 PostCSS 8。由于 PostCSS 8 只有几个月的历史。。。。

等等！2.0 ？

我之前看的文档都是 3.x 的 。。。

打开 2.0 的文档，搜索一下 Custom 。。。

淦！ 2.x 不支持任意值！！！！

原来，有些事情，从一开始，就注定了。。。

N、后记

看来这次注定搞不了了，那就老老实实起个新的 vue3 项目吧，在那边把新技术都怼上去

顺带一提，我一开始也觉得 TailwindCSS 是异端

不过最近接触出海独立站，并且独立上线一个网站后，对其感观大幅改变

如果有想听原因的朋友，那就给咱点个赞吧~

支持一下掘金新人~

感谢观看~