React+Vite环境下Tailwind CSS样式不生效问题求助

我用Vite搭建了React项目，成功安装TailwindCSS且终端无报错，严格按照官方文档完成配置，但使用文档示例中的Tailwind类时样式完全不生效，最终渲染的HTML没有呈现设置的样式。以下是项目的相关配置文件：

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from "tailwindcss"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    }
  }
})

tailwind.config.js

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

index.css

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

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

问题排查与修复 #

1. index.css的两处错误

• 第一行指令拼写错误：@itailwind → 修正为@tailwind
• Tailwind指令顺序错误：必须遵循base → components → utilities的固定顺序，否则会导致样式加载异常

修正后的index.css：

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

2. tailwind.config.js的路径匹配错误

content数组里的文件名扩展名之间加了空格，导致Tailwind无法正确扫描项目中使用的类，需去掉逗号后的空格：

修正后的tailwind.config.js：

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

3. 可选优化：vite.config.js冗余配置

因为已有单独的postcss.config.js配置了Tailwind和Autoprefixer，可去掉vite.config.js中css.postcss的冗余配置，简化为：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

最后步骤 #

修改完配置文件后，重启Vite开发服务器，Tailwind样式即可正常生效。

内容的提问来源于stack exchange，提问作者Hi - P