使用 React 和 Vite 设置时，Tailwind CSS 不应用样式

Question

我用

Vite

设置了一个

React项目。我还成功安装了TailwindCSS，终端中没有任何错误。我遵循了所有文档说明，但在尝试使用文档示例中的 Tailwind 类时，没有一个起作用。我最终渲染的 HTML 没有反映我在其上设置的样式。我也曾在 Google 和 Stack Overflow 上搜索过解决方案，但现在对此束手无策。

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: {},
  },
}

这是包含完整项目文件的存储库：

Tailwind Test

Answer 1

最后发现问题出在tailwind.config.js文件上。在内容数组中，

js位于jsx之前，这阻碍了它应该做的事情。

我不明白的一件事是，我认为既然列出了它们，Tailwind 就应该选择适用于它的一个（即

jsx）。为什么我要先清除前面的js才能起作用？