安装
pnpm install tailwindcss@latest postcss@latest autoprefixer@latest -D
npx tailwindcss init
生成 tailwind.config.js 之后更改内容
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
}
},
plugins: []
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-nested': {},
// 允许scss中，进行嵌套的类名写法
'tailwindcss/nesting': 'postcss-nesting',
}
}
然后 vite添加这个内容
css: {
postcss: {
plugins: [
tailwindcss,
autoprefixer,
]
}
}
最后建个 css文件 , 在 main.jsx 里边引入即可
/* src/index.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
