vue配置Tailwind CSS

第一步：这边跳过创建项目

第二步：安装tailwind css

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

第三步：初始化配置文件

npx tailwindcss init

初始化有两个文件
tailwind.config.js
.postcss.js or .postcssrc.js

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // 在低版本里面这个字段有可能叫 purge,需要自己区分下
  darkMode: false, // or 'media' or 'class'
  mode: 'jit', // 是否开启jit模式，开启以后编译会更快，当然，tailwindcss版本需要在2.1以上
  theme: {},
  variants: {},
  plugins: [],
}

第四步：tainwind.css配置文件

在assets文件夹创建一个空的tainwind.css配置文件
默认引入 css 方式

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

第五步：在main.js/ts引入tainwind.css配置文件

第六步（vscode装插件开发时有提示）（推荐）

开发，写类名的时候需要空格一下才有（提示）