- 首先可以明确的知道,只按照官网的配置是会导致样式不加载或者加载不生效等问题的。
正确的处理方案
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.去测试，大功告成
