CSS样式是否会覆盖同一元素的Tailwind类？优先级规则解析

一、你的自定义CSS会覆盖Tailwind类吗？ #

直接说结论：部分生效，不会完全覆盖

• 对于font-size：Tailwind的text-sm是类选择器（.text-sm），你的自定义样式是元素选择器（p）。类选择器的CSS特异性比元素选择器高，所以text-sm的font-size会保留，自定义的font-size: 1rem不会生效。
• 对于text-align: center：你没有给这个p元素添加Tailwind相关的对齐类，所以这个自定义样式会直接生效。
• 对于text-black：你的自定义CSS里没有定义color属性，所以Tailwind的text-black样式会正常保留。

二、浏览器决定样式优先级的核心规则 #

浏览器遵循CSS特异性（Specificity）和加载顺序来确定最终应用的样式：

1. 特异性权重规则：优先级从高到低为
   • 内联样式（权重：1,0,0,0）
   • ID选择器（权重：0,1,0,0）
   • 类选择器、伪类选择器、属性选择器（权重：0,0,1,0）
   • 元素选择器、伪元素选择器（权重：0,0,0,1）
     权重值相加更高的规则优先生效；权重相同时，后加载的样式会覆盖先加载的。
2. !important 例外：带有!important声明的样式会跳过特异性检查，直接优先级最高（除非其他样式也带!important，此时再看特异性和加载顺序），但不推荐滥用，会增加样式维护难度。

三、Tailwind与自定义CSS的交互机制 #

Tailwind生成的样式本质都是类选择器，和你自己写的类选择器遵循完全相同的CSS规则，核心在于两个关键点：

1. 引入顺序：
   • 如果你的自定义CSS在Tailwind CSS之后引入，那么相同特异性的规则（比如两个类选择器），自定义样式会覆盖Tailwind的。
   • 反之，如果Tailwind CSS后引入，它的类会覆盖你之前写的相同特异性的自定义类。
2. @layer 指令的作用：
   Tailwind提供@layer指令（@layer base/@layer components/@layer utilities），可以把你的自定义样式整合到Tailwind的样式层级中。比如把自定义工具类放到@layer utilities里，Tailwind会自动处理它的优先级，让它和自带的utility类保持一致，方便你扩展Tailwind而不用手动调整特异性。

调整优先级的实用例子 #

如果想让自定义的font-size: 1rem覆盖text-sm，可以用以下方法：

• 提高自定义选择器的特异性：

  p.text-sm {
    font-size: 1rem;
  }
  

• （不推荐）给自定义样式加!important：

  p {
    font-size: 1rem !important;
    text-align: center;
  }
  

• 扩展Tailwind自定义类（推荐）：
  在Tailwind配置或自定义CSS中添加：

  @layer utilities {
    .text-base-custom {
      font-size: 1rem;
    }
  }
  

  然后给p元素替换类：<p class="text-base-custom text-black">...</p>

内容的提问来源于stack exchange，提问作者Nayan Anand