vue3使用tailwindcss

安装tailwindcss及其依赖

npm install -D tailwindcss postcss autoprefixer

生成Tailwind CSS配置文件

npx tailwindcss init -p

在配置文件content中添加所有模板文件的路径

//tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建一个tailwindcss.css样式文件，用于初始化并引入tailwindcss的基础样式

/* /src/css/tailwindcss.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

导入css/tailwindcss.css到main.js，这样就让你的项目拥有了Tailwind CSS

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import "./css/tailwindcss.css"

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