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

【问题标题】：Why aren't the Tailwind classes taking effect in my Vite React project?为什么 Tailwind 类在我的 Vite React 项目中没有生效？
【发布时间】：2022-07-09 10:50:58
【问题描述】：

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

postcss.config.js：

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

tailwind.config.js：

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

App.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 中的说明完成的。

为什么它不起作用？

【问题讨论】：

问题可能出在您的文件名上。它们包含 JSX，因此它们应该具有 .jsx 文件扩展名（新的 Vite + React 脚手架项目会对此发出警告）。此外，Tailwind content 配置应包括 .jsx。见demo。

标签： reactjs tailwind-css postcss vite

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

错误原因可能在规则@tailwindcss 处未知

要解决这个问题，你必须下载这个extension

【讨论】：