记一次 Vue2 成功引入 TailwindCSS 踩坑经验

程序员卡诺
983 阅读3分钟

前情提要：记一次失败的 Vue2 引入 TailwindCSS 经验。。。 - 掘金 (juejin.cn)

TailwindCSS jit mode 文档： Just-in-Time Mode

上次给公司的老 vue2 项目引入 TailwindCSS，最终因 TailwindCSS 2.x 不支持变量而宣告失败

但后来评论区有一位朋友表示 TailwindCSS 2.1 开始是支持的，核心就是开启 jit 模式

于是乎今天再战一波，最终成功 🎉🎉

由于时间关系，这里就不写流水账了，直接记录结果：

安装库

由于 vue2 项目对应的 vue-cli 使用的 postcss 是 7.x 版本，所以需要安装对应 tailwindcss

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

# yarn
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

添加 tailwind.config.js 配置文件

需要注意的点：

mode: "jit" 是开启 jit 模式的关键

可以看到 corePlugins 内我关闭了一些模块，因为这些模块有些样式和我项目中冲突了，如果你们没有冲突就不用关闭，具体可以看上一篇文章

// tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
    mode: "jit",
    // These paths are just examples, customize them to match your project structure
    purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
    corePlugins: {
        preflight: false, // 关闭预设样式
        container: false, // 关闭 container容器 模块（ .container 类冲突了）
        display: false, // 关闭 display 模块（ .list-item 类冲突了）
    },
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
};

配置 Postcss

不知为啥我通过 postcss.config.js 配置的内容没有生效

总之最终在 vue.config.js 配置 postcss 成功运行了，有兴趣的朋友可以自己多试几次

// vue.config.js

module.exports = {
    ...
    css: {
        loaderOptions: {
            postcss: {
                plugins: [require("tailwindcss"), require("autoprefixer")],
            },
        },
    }
    ...
}

main.js 引入 css

在项目的 main.js 中引入 tailwind.css

// main.js

import "tailwindcss/tailwind.css";
...

遇到坑

本来操作完前几步我以为就完事了，结果发现了一个非常蛋疼的事情：

TailwindCSS 的诸如 h-[100px] w-[200px] 的变量能用了

但是只在项目启动的时候编译了一次，后续没有热更新！

然后在一顿搜索后，找到了解决方法

修改项目启动命令

修改 vue-cli 本地开发 的启动命令，加入一个变量 TAILWIND_MODE=watch

以下是一个简化版的命令，如果原来命令里有其他变量，那么就在 cross-env 和 vue-cli-service 中间加个空格把 TAILWIND_MODE=watch 扔进去就完事了

cross-env TAILWIND_MODE=watch vue-cli-service serve"

最终效果

做完以上的内容，就可以在 vue2 的项目中 开心的使用 TailwinCSS 了~

<div class="w-full h-[500px] bg-green-300 flex items-center justify-center">
    <div class="h-[200px] w-[200px] bg-white border-blue-400 border-solid border">
        <p class="leading-[200px] text-center text-[20px]">程序员卡诺</p>
    </div>
</div>
image.png

但是依旧有坑

在我走完以上流程以后，开心的写了几个带变量 class 试了试，结果立马发现了问题：编译有点慢

我的电脑是 MacBook M1 Pro 32G 内存，这样的配置下我改一下界面，需要编译 3-5 秒才能编译完

慢也就算了，勉强能用，但是在热更新几次后，整个项目停了，报错如下：

Usersexec error: ERR_CHILD_PROCESS_STDIO_MAXBUFFER

大概是就是在构建过程中 node 子进程的什么缓冲区不够用了

这给我干懵逼了，曾一度以为是这个项目的 webpack 的 loader 太多了导致的问题。。。

然后搜到了掘友的文章：踩坑Tailwindcss的JIT模式 - 掘金 (juejin.cn)

说将环境变量改为：TAILWIND_MODE=jit 就好了，但我操作后发现也不太行

最终这个问题没有得到解决，我打算把公司的项目从 webpack 更新到 vite 试试。。。

最后

感谢各位观看，也欢迎大家点赞关注

下一步就是打算把公司的项目从 webpack 更新到 vite，等折腾完了再发一个文章

同时

我最近也在折腾独立开发，尝试独立站出海赚美刀

如果你对这方面有兴趣，可以评论区留言，我再开个专栏单独记录进展~

avatar
文章
阅读
粉丝