前言
前端开发中，样式是不可避免的一个重要部分。在 CSS 的世界里，样式的优先级是比较重要的一个概念。不同的样式优先级不同，会导致页面渲染出不同的效果。而在使用 CSS 框架时，样式优先级的问题也需要我们关注。本文将重点探讨原生 CSS 和 Tailwind CSS 样式优先级的问题，并提出如何优雅地解决这种问题。
样式优先级
在 CSS 样式表中，当一个元素被多个选择器匹配到时，会有一种叫做优先级的规则，用于决定哪个样式规则具有更高的优先级。通俗来说，就是哪个样式更具体、更优先，就应用哪个样式。
优先级的计算规则如下：
- 同一标签上的 ID 选择器、类选择器和属性选择器，ID 选择器权重为 100、类选择器和属性选择器权重为 10。
- 继承的样式的权重为 0。
- !important 要比上面所有权重都高，仅可用在内联样式中（如 style 属性）。
除上述规则外，每多一个父级嵌套就会增加权重 10，最高权重为 10000。
如下面这个例子：
<div id="box" class="container"></div>
CSS 样式为：
.container {
color: red;
}
#box.container {
color: blue;
}这个例子中，由于 .container 的权重是 10，而 #box.container 的权重是 100，因此 #box.container 的样式规则具有更高的优先级，所以最终颜色是蓝色。
Tailwind CSS 的样式优先级问题
Tailwind CSS 是一个 CSS 框架，它提供了很多预定义的样式类，可以方便地帮助我们快速构建复杂的 UI 界面。但 Tailwind CSS 也会带来样式优先级的问题，因为 Tailwind CSS 中的样式是通过组合多个类名来实现的，如下所示：
<div class="bg-blue-500 text-white font-bold"></div>
这个 div 元素将被应用背景颜色为蓝色、文字颜色为白色、字体加粗的样式，这些样式都是由 Tailwind CSS 提供的预定义样式类组合而来，但是这样子的代码会让我们无法确定样式应用的优先级，导致我们难以控制样式的表现。
此时，有两种方法可以解决这个问题：
先写重要的样式
将最重要的样式写在最后一个类名中，并加上 !important。如下所示：
<div class="text-white bg-blue-500 font-bold !important"></div>
这样写可以确保这个样式会覆盖其他样式，但 !important 同时也会影响到其他样式的优先级，如果其他样式的优先级与此处的样式相同，那么挑战类名的后一个样式将会被忽略。
减少使用多个样式类
在 Tailwind CSS 中已经提供了很多预定义的样式类，我们可以通过减少使用多个样式类的方式来减少样式优先级的问题。一般来说，可以通过编写自定义样式类的方式，将一组常用的样式组合在一起，降低样式的复杂度和优先级问题。
<div class="my-custom-styles"></div>
<div class="my-custom-styles text-blue-500"></div>
总结
尽管 Tailwind CSS 带来了样式优先级的问题，但我们可以通过减少使用多个样式类以及考虑样式的优先级问题来解决这个问题。对于前端开发者来说，理解样式优先级的重要性，能够正确地应用样式优先级规则是至关重要的技能，这不仅能帮助我们更好地进行样式控制，还能提高我们代码的扩展性，让我们的代码更加易于维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6644283fd3423812e420e712