vue2使用tailwindcss

安装包

npm install -D tailwindcss

初始化配置文件tailwindcss.config.js

npx tailwindcss init

在 tailwind.config.js 文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 这里配置的是src文件夹下面所有的html被匹配到
  content: ["./src/**/*.{vue,js,ts,jsx,tsx}",'./public/index.html'],
  important:true,
  theme: {
    extend: {},
  },
  // blocklist: ['container'], // 阻止tailwindcss对某些类进行打包
  plugins: [],
}

在/src/assets下面新建index.css，内容如下

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

在package.json里面新增如下

"scripts":{
    "watch":"npx tailwindcss -i ./src/input.css -o ./src/output.css --watch"
}

在main.js引入

import '@/assets/output.css'

运行

// 先运行
npm run watch
// 在运行启动项目的命令
npm run serve