安装tailwindcss
vite自带安装了postcss,只需要安装tailwindcss;没有postcss需要安装!!
npm install -D tailwindcss
自动创建tailwind.config.js
npx tailwindcss init -p
/** @type {import('tailwindcss').Config} */
module.exports = {// 配置需要使用tailwindcss的文件content: ['./src/views/**/*.{vue,ts,js}'],theme: {extend: {},},plugins: [],
}
配置postcss.config.js
module.exports = {plugins: {// ...tailwindcss: {},}
}
全局样式文件添加以下内容
在全局样式文件css、less、scss文添加都可以。在main.js或者main.ts引入样式文件
// tailwindcss.css
@tailwind base;
@tailwind components;
@tailwind utilities;
最后一步最重要,配置vite.config.ts!!!
vite.config.ts或者vite.config.js
export default defineConfig({// ...plugins: [// ...tailwindcss({config: 'tailwind.config.js', // Tailwind CSS 配置文件路径}),],
})