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、 再战
左搜搜,右搜搜,找到了掘金的一篇文章:
tailwindcss vue2简单配置 - 掘金 (juejin.cn)
开整!
这回安装 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 是异端
不过最近接触出海独立站,并且独立上线一个网站后,对其感观大幅改变
如果有想听原因的朋友,那就给咱点个赞吧~
支持一下掘金新人~