Tailwind CSS 应用顺序

Question

我想了解Tailwind CSS的应用顺序。或者这可能是通用CSS顺序的问题。

然而，当我使用了两个类bg-gray-50和bg-gray-500时，只有bg-gray-50类被应用。这与两个类的顺序无关。 因此，bg-gray-50 bg-gray-500和bg-gray-500 bg-gray-50具有相同的效果。 始终只应用bg-gray-50类。

为什么会这样，并且我该如何应用bg-gray-500类？

- Yery cs

Answer 1

由于在tailwind的css核心文件中，他们定义了所有tailwind类，他们把类bg-gray-50放在bg-gray-500之前。所以编译器会先编译第一个类，并忽略后面的类。您可以想象一下它们的顺序：

// tailwind.css
.bg-gray-50 { background-color: #E9E6E6 }
.bg-gray-500 { background-color: #DCD7D7 }

如果您想应用 bg-gray-500，请使用 style 属性定义 backgroundColor，该属性具有更高的优先级。例如：style={{backgroundColor: '#DCD7D7'}}

- Hai Nguyen

---

谢谢你的回答。还有其他解决方案吗？我正在React中使用tailwind css，并且想通过传递类名来自定义样式。 - Yery cs

你可以在 tailwind.config.js 文件中定义的类名后面添加 !important。 - Hai Nguyen

@Yerycs 你可以做的一件事是有条件地仅添加其中一个类。或者，如果您想覆盖tailwind类，可以设置内联CSS样式。 - Chris Aby Antony

这种做法完全违背了TW的初衷！这实际上是这个框架的一个关键问题。仅仅因为某些东西恰好在生成的CSS中定义在后面！我们怎么控制这个呢？ - undefined