0、前言

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

之前已经升级到 vue2.7 了

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

1、开干！

查了一下 vue-cli 自带 postcss

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

Install Tailwind CSS using PostCSS - Tailwind CSS

安装库

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 代码提示

tailwindcss.com/docs/editor…

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

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

万事俱备，代码开敲！

..........

..........

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

是我 PostCSS 没整对吗

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

（不停的 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 是异端

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

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

感谢观看~