vue3使用tailwindcss

1.项目根目录安装

yarn add -D tailwindcss postcss autoprefixer

2.生成Tailwind CSS创建配置文件（生成postcss和tailwind文件）

npx tailwindcss init -p 

1. 文件默认内容

3.tailwind.config.js中，你可以根据需要配置Tailwind CSS

// tailwind.config.js
module.exports = {
  purge: [], //purge: ['./index.js', './src/**/*.{js,jsx,ts,tsx}'], // 根据实际情况配置路径
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

4.在asstes文件夹创建main.css

/* ./assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

5.在main.js入口文件引入main.css

import "@/assets/main.css"

6.html使用

 <div class="bg-blue-600">test</div>