今天我们来尝试一下使用Tailwind CSS，官网有很多框架的介绍，我今天是使用的webpack，按照官网不知道为什么我的项目就是没啥效果，查阅了资料才搞定，今天我们一起来走一下踩坑之路

1.安装
安装 Tailwind 及其依赖项 postcss 和 autoprefixer。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2、创建配置文件
npx tailwindcss init -p
会在项目根目录下生成postcss.config.js和tailwind.config.js文件。
tailwind.config.js里面
module.exports = {
content: [
'./index.html',
'./src/*/.{vue,js,ts,jsx,tsx}'
],
darkMode: 'media',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
postcss.config.js里面
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

image.png

接下来是使用
我们可以在src/目录下面的index.css文件中引入类

@tailwind base;
@tailwind components;
@tailwind utilities;

这时候记得在main.js里面引入一下你的index.css

然后我们就可以在vue文件里面使用了