在 Vite+Vue3 中使用 Tailwind CSS 配置
步骤
1. 安装依赖
npm install -D tailwindcss postcss autoprefixer
2. 根目录创建 postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
3. 根目录创建 tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
theme: {
extend: {},
},
plugins: [],
}
4. 在 src/assets 目录中创建 tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
5. 在 main.js 中添加引用css
import './assets/tailwind.css'
6. 运行项目
如果遇到提示报错 “[plugin:vite:css] Failed to load PostCss config” 将第2步的 postcss.config.js 后缀名改为 postcss.config.cjs