Vue-Cli 4安装tailwindcss2并配置JIT模式

安裝 Tailwind

开始安装 tailwind 和相关所需的组件。

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

为了开启jit模式，并使其顺利运行，需要安装cross-env，监听变化，动态生成样式

npm install -D cross-env

设置 Tailwind

上面这些东西安装完了，我们就开始执行指令来配置：

npx tailwindcss init -p --jit

修改配置

接着开启 tailwind.config.js 设置 purge 监听文件范围：

module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.{html}',
    './src/**/*.{vue,js,ts,html}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [],
}

使用 CSS

接着，到 ./src 文件夹中新增一个文件 tailwind.css，並新增以下內容：

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

然后修改 ./src 文件夹的 main.js，增加一行 css 的引用：

import { createApp } from 'vue'
import App from './App.vue'

import './tailwind.css'   // ← ← ← 新增這行

createApp(App).mount('#app')
...

然后

终于到了最后的步骤了，修改根目录的package.json，修改scripts指令如下

"scripts": {
  "serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve",
  "build": "cross-env TAILWIND_MODE=build vue-cli-service build",
  "lint": "vue-cli-service lint"
},

使用 Tailwind

上面步骤做完之后，可以开启服务使用了。

执行npm run serve，就可以去浏览网站了！ http://localhost:8080/

书写代码：

<div class="mt-[300px] w-[500px]">
</div>

尽情的编写tailwind，使用jit及时更新吧！