关于vite+vue3引入tailwind框架的正确方式

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

正确的处理方案

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.在package.json 中添加

  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "autoprefixer": {}
    }
  }

8.大功告成