Tailwind CSS 移动优先媒体查询不起作用

Question

有时，但并非总是，当我使用 Tailwind CSS（在带有 webpack 的 React 项目中）时，我尝试应用这样的类：

<p className="text-2xl sm:text-3xl">Some text</p>

预期行为：根据 Tailwind 的移动优先设计，我的文本在超小/移动屏幕上的尺寸将为“2xl”，然后在最小宽度为 640px 时，其尺寸将为“3xl”

实际结果：在 CSS 中读取 640px 媒体查询断点处的“3xl”规则，但它在 Chrome 开发工具中被划掉，而“2xl”大小则覆盖它。这也许表明 2xl 规则在级联中具有更大的特异性，这与 Tailwind 的预期行为相反。

--直接引用Tailwind的文档：

//Use unprefixed utilities to target mobile, and override them at larger breakpoints
<div class="text-center sm:text-left"></div>

看看我上面的规则的结果......

我很难理解为什么它可能不应用这种风格，因为我完全按照我应该的方式使用 Tailwind。

正确的？

Answer 1

解决方案是这样的：

我使用的是Material Tailwind库，它是使用style-loaderwebpack 导入的。其一，我使用的是 Tailwind v3，而该库依赖于 Tailwind v2。此外，主要是，它被加载到样式标记中并在main.css文件之后引用。难怪它会引起问题。

我尝试切换加载/导入过程，以便它main.css与我的主 Tailwind 库一起加载到文件中。它会导致媒体查询问题消失，但组件会混乱，可能是由于 Tailwind v3 和 v2 之间不兼容。

删除该库后，它会按预期工作。我最终没有使用这个库，而是根据需要创建了自己的自定义组件，而无需为实现依赖重且破坏应用程序的库而烦恼。

解决了 ：）