为什么我的Vite React项目中的Tailwind类没有生效？

Question

我有一个 Vite React 项目，通过 PostCSS 使用 Tailwind。但是，没有一个类反映本地主机。以下是项目中的文件：

postcss.config.js：

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

tailwind.config.js：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

应用程序.js：

const App = () => {
  return (
    <div className="App">
      <h1 class="text-3xl font-bold underline">
        Hello world!
      </h1>
    </div>
  )
}
export default App

这一切都是按照 Tailwind 文档中的说明完成的，网址为https://tailwindcss.com/docs/installation/using-postcss。

为什么不起作用？

Answer 1

您应该更新该tailwind.config.js文件以包含 .jsx 文件：

{html,js} => {html,js,jsx}

module.exports = {
  content: ["./src/**/*.{html,js,jsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}