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

2023-05-19 00:09:00 0 2007

安裝 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及时更新吧!

随缘而来,乘风而去,山高海阔,自有我风采!
所属分类: Node.js

发表留言