tailwindcss配之后不生效

首先看看如何配置

//1.安装 tailwindcss
npm install -D tailwindcss
//2.生成tailwind.config.js文件
npx tailwindcss init

//3.在 tailwind.config.js 配置文件中添加所有模板文件的路径。
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
//4.在main.js里面引入tailwind.css
新建一个tailwind.css如下
@tailwind base;
@tailwind components;
@tailwind utilities;

以上配置完成 为了方便使用在vscode里面添加一个插件，这样每次能提醒相关class类名

然后！！！重点我出现了bug，配置完成没问题之后，相关的class不生效

看到了没引入的 css样式没解析，为了让他解析成功

应该在。vite.config.js里面加上

• require('tailwindcss'): 这是对Tailwind CSS插件的引用，表示PostCSS应该使用Tailwind CSS。Tailwind CSS 是一个功能类优先的 CSS 框架，使得开发者可以通过在HTML元素上应用特定的类来快速构建设计。
• require('autoprefixer'): 这是对Autoprefixer插件的引用，表示PostCSS应该使用Autoprefixer。Autoprefixer 是一个后处理程序，它可以自动添加浏览器厂商前缀到CSS规则里，以确保跨浏览器的兼容性。

然后问题就解决拉拉~~~~~~

引入成功！！可以使用了