Tailwind CSS 属性与 class 的优先级问题解析-JavaScript中文网-JavaScript教程资源分享门户

什么是 Tailwind CSS？

Tailwind CSS 是一个 CSS 框架，它的特点是通过一系列预定义的类来定义样式，而不是像传统 CSS 框架那样使用 class 内样式来定义样式。这种方式可以大大简化前端开发中的样式定义，提高代码的可读性和可维护性。

在 Tailwind CSS 中，class 的优先级有以下三个等级：

优先级最高的是首选项类，其次是自定义类，最后是默认类。但是，不同类的优先级在不同的情况下会有所变化。

在 Tailwind CSS 中，类似于bg-gray-500这样的类实际上是组成了一个属性，其中bg表示背景（background），而gray-500表示灰色的 shade。因此，在使用 Tailwind CSS 的时候，我们需要理解属性之间的优先级。

在 Tailwind CSS 中，属性的优先级由以下列表示：

这意味着，使用自定义属性来覆盖默认属性是有可能的，但是具有组合属性的默认属性则无法覆盖。

我们可以使用@apply关键字创建自定义属性，可以将一组类组成一个自定义属性，如：

.my-btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded;
}

在上面的例子中，我们将bg-blue-500、hover:bg-blue-700、text-white、font-semibold、py-2、px-4和rounded这些类组成了一个自定义属性.my-btn。

自定义属性的优先级高于默认属性，这意味着如果我们有这样的类：

.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded;
}

则.my-btn比.btn优先级更高。

在 Tailwind CSS 中，有一组默认属性，如.bg-gray-500和.text-sm等。这些默认属性的优先级低于自定义属性，但高于组合属性。这意味着，如果一个类是默认属性和自定义属性的一部分，那么默认属性将被使用，而自定义属性将被忽略。

Tailwind CSS 中的一些类具有组合属性，如.bg-cover和.text-center等。组合属性比默认属性优先级更高，但低于自定义属性。

例如：

.custom {
  @apply text-center;
}

在上面的例子中，.custom类只包含了.text-center类，没有其他类，因此.text-center将具有更高的优先级。但是，如果.custom类也包含其他类，如：

.custom {
  @apply bg-blue-500 text-center;
}

则bg-blue-500将优先于text-center。

在使用 Tailwind CSS 时，需要考虑属性和类的优先级。自定义属性是最高优先级的，其次是默认属性，最后是组合属性。此外，首选项类（!）也是一种高优先级的类，用于覆盖其他类的样式。理解这些优先级的概念将有助于您更好地使用 Tailwind CSS。

.my-btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded;
}

<a href="#" class="bg-gray-500 text-white font-bold py-2 px-4 rounded">My button</a>

.custom {
  @apply bg-blue-500 text-center;
}

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64bf9d759e06631ab9c22f77