什么是 Tailwind CSS？
Tailwind CSS 是一个 CSS 框架，它的特点是通过一系列预定义的类来定义样式，而不是像传统 CSS 框架那样使用 class 内样式来定义样式。这种方式可以大大简化前端开发中的样式定义，提高代码的可读性和可维护性。
Tailwind CSS 的 class 优先级
在 Tailwind CSS 中，class 的优先级有以下三个等级：
- 首选项类（!）：用于覆盖其他类的样式。
- 自定义类（-）：用于定义自定义样式。
- 默认类：Tailwind CSS 中的默认类，如
.bg-gray-500和.text-sm等。
优先级最高的是首选项类，其次是自定义类，最后是默认类。但是，不同类的优先级在不同的情况下会有所变化。
属性的优先级
在 Tailwind CSS 中，类似于bg-gray-500这样的类实际上是组成了一个属性，其中bg表示背景（background），而gray-500表示灰色的 shade。因此，在使用 Tailwind CSS 的时候，我们需要理解属性之间的优先级。
在 Tailwind CSS 中，属性的优先级由以下列表示：
- 自定义属性
- 默认属性
- 组合属性
这意味着，使用自定义属性来覆盖默认属性是有可能的，但是具有组合属性的默认属性则无法覆盖。
自定义属性
我们可以使用@apply关键字创建自定义属性，可以将一组类组成一个自定义属性，如：
------- - ------ ----------- ----------------- ---------- ------------- ---- ---- -------- -
在上面的例子中，我们将bg-blue-500、hover:bg-blue-700、text-white、font-semibold、py-2、px-4和rounded这些类组成了一个自定义属性.my-btn。
自定义属性的优先级高于默认属性，这意味着如果我们有这样的类：
---- - ------ ----------- ----------------- ---------- ------------- ---- ---- -------- -
则.my-btn比.btn优先级更高。
默认属性
在 Tailwind CSS 中，有一组默认属性，如.bg-gray-500和.text-sm等。这些默认属性的优先级低于自定义属性，但高于组合属性。这意味着，如果一个类是默认属性和自定义属性的一部分，那么默认属性将被使用，而自定义属性将被忽略。
组合属性
Tailwind CSS 中的一些类具有组合属性，如.bg-cover和.text-center等。组合属性比默认属性优先级更高，但低于自定义属性。
例如：
------- - ------ ------------ -
在上面的例子中，.custom类只包含了.text-center类，没有其他类，因此.text-center将具有更高的优先级。但是，如果.custom类也包含其他类，如：
------- - ------ ----------- ------------ -
则bg-blue-500将优先于text-center。
总结
在使用 Tailwind CSS 时，需要考虑属性和类的优先级。自定义属性是最高优先级的，其次是默认属性，最后是组合属性。此外，首选项类（!）也是一种高优先级的类，用于覆盖其他类的样式。理解这些优先级的概念将有助于您更好地使用 Tailwind CSS。
示例代码
自定义属性
------- - ------ ----------- ----------------- ---------- ------------- ---- ---- -------- -
默认属性
-- -------- ------------------ ---------- --------- ---- ---- ----------- ----------
组合属性
------- - ------ ----------- ------------ -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64bf9d759e06631ab9c22f77