• 首先可以明确的知道,只按照官网的配置是会导致样式不加载或者加载不生效等问题的。

正确的处理方案

1.首先按照官网的指示安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2.然后项目根目录创建postcss.config.js文件

module.exports = {plugins: {tailwindcss: {},autoprefixer: {},},
};

3.将tailwind.config.js文件内容修改为：

/** @type {import("tailwindcss").Config} */
export default {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},fontFamily: {},},plugins: [],
};

4.src目录下创建一个style目录下再创建index.css文件

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

5.再main.ts或者是main.js文件内添加

import './style/index.css'

6.最最最最重要的一步：在vite.config.ts中的plugins同级配置项添加如下代码：

  css: {preprocessorOptions: {postcss: {plugins: [tailwindcss, autoprefixer],},},},

7.去测试，大功告成