Tailwind class 没有生效

Question

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

这是存储库link

Answer 1

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

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

Answer 2

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

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

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

Answer 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，这对我来说非常有效！

Tailwind class doesn't take effect