TailwindCSS 前缀有时会被忽略

Question

这有效：

<div class="hidden xl:block"></div>

div 将在较小的屏幕上隐藏，并从

xl

断点开始显示。

然而，这些并没有像我认为的那样起作用：

<div class="text-blue xl:text-red"></div>
<div class="text-start xl:text-center"></div>
<div class="px-5 xl:px-20"></div>

div 将在所有屏幕尺寸上应用

text-blue

、

text-start

、

px-5

，

xl

前缀之后的类将被完全忽略。

通过检查开发者工具中的代码，我发现类

px-5

具有以下属性：

.px-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}

而对于

px-20

，我们只有

margin-left

和

margin-right

，但

!important

不存在。所以

px-5

始终适用。

根据 Tailwind 的文档，如果我们有类

px-5 xl:px-20

，那么

px-5

应该应用于较小的屏幕，并且

px-20

应该从

xl

断点应用，但这对我来说从来没有发生过。

sm:px-5 xl:px-20

将按预期工作，但是最小的屏幕根本没有任何填充，因为在

sm

断点下。

xs:px-5 xl:px-20

根本不起作用。

我在 StackOverflow 或 Google 上没有找到解决方案。我是否误解了 Tailwind 的工作原理？

我尝试像这样颠倒课程

xl:px-20 px-5

，但这当然没有改变任何东西。

我尝试将重要标签添加到

xl

类中，如下所示：

sm:px-5 !xl:px-20

，但这也不起作用。

我尝试在

 important: true

中添加

tailwind.config.js

，这确实将

!important

添加到

px-20

类的属性中，但

px-5

仍然获胜。

我确实用npm重建了资产，我确实清除了缓存和配置，我在Google上搜索，我询问了ChatGPT，我只是找不到解决方案。

Answer 1

正如评论中提到的，你需要知道 Tailwind 是如何工作的，并且尽量不要使用

!important

。

<script src="https://cdn.tailwindcss.com"></script>
<div class="text-blue-400 xl:text-red-400">Text is blue by default, it is red on large screens</div>
<div class="text-start xl:text-center">Text is aligned on start by default, on large screen it is centered.</div>
<div class="px-5 xl:px-20">Padding horizontally by 20px default, 160px on large screens </div>

默认

config

。

完全不建议使用

!important

。