TailwindCSS使用并开启JIT（vue2）

前提vue2工程

安装

不要安装官网最新版，因为vue2还不支持

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

init 配置

npx tailwindcss init -p
1

这样根目录多了两个文件
tailwind.config.js和postcss.config.js

main.js 引入

import 'tailwindcss/tailwind.css'
1

重启项目npm run serve

这样基本上就开就可以用常规的那些类名来设置样式了，例如 m-20, p-200 ,text-200等。

开启JIT(解决 text-[ 16px] 、 bg-[#000000]等带中括号的自定义动态类名不生效问题，也就是官网说的任意值设置。

安装cross-env

npm install -D cross-env
1

修改tailwind.config.js

设置mode,和purge(文件的监控范围）

module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.{vue,js,ts,html}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [],
}
1
2
3
4
5
6
7
8
9
10
11

修改package.json的scripts指令

加入 cross-env TAILWIND_MODE=watch

"scripts": {
  "serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve",
  "build": "cross-env TAILWIND_MODE=build vue-cli-service build",
},
1
2
3
4

npm run serve

你可以拥有tailwindcss的所有功能了