Tailwind 类不生效答案

【问题标题】：Tailwind class doesn't take effectTailwind 类不生效
【发布时间】：2020-09-22 00:41:03
【问题描述】：

我为一个小项目创建了一个反应设置，并决定添加顺风。它是成功的，但是当我将类添加到组件时，我没有看到任何变化。

这是存储库的link

【问题讨论】：

【解决方案1】：

一切似乎都很好。一旦删除节点模块和 package.lock.json 文件并安装节点模块，然后启动服务器。

另外，App.js 中无需导入tailwind.css。只需 main.css 就足够了，因为我们已经将所有样式附加到 main.css（检查 package.json 中的脚本）

【讨论】：

【解决方案2】：

我发现了问题。它来自我的 CSS 加载器的 webpack 配置。我注意到，当我添加自己的样式表时，并没有应用所有规则。

{
        loader: "css-loader",
        options: {
          modules: true,
          importLoaders: 1,
          sourceMap: true
        }
      }

我不得不删除所有选项。我什至不知道为什么我一开始就添加了它。 Tailwind CSS 现在可以工作了。

【讨论】：

好的。以及为什么要使用 webpack？我建议使用 create-react-app 附带的 react-scripts npm 包。 create-react-app.dev/docs/getting-started/…
是的，我知道 create-react-app。但是 CRA 附带了一些我可能不需要的东西。而且我正在做的项目并不大，这就是为什么我决定创建没有 CRA 的 React 应用程序。

【解决方案3】：

如果您知道您配置了 Tailwind 并添加了正确的设置和预设，您可能需要添加以下内容：

module.exports = {
  content: [
    './public/index.html', <-
  ],
}

或者这个，如果你使用 ReactJS：

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}'
  ],
  // ...
}

在您的 tailwind.config.js 文件中。

您也可以learn/read 了解更多信息：https://tailwindcss.com/docs/content-configuration，这对我来说非常有效！

【讨论】：