Tailwind CSS 中的样式渲染顺序

如果你 tailwind 已经写一段时间了，相信你有时候也会想把因为 tailwind 语法而变的很长的 class 变短吧，那这时候就要用到的是 tailwind 里的 `@apply` 指令。

整理前

<button class="rounded-xl bg-gray-400 p-3 text-white">
    立即前往
</button>

整理後

<!-- html -->
<button class="myBtn">
    立即前往
</button>

/* css */
.myBtn {
    @apply rounded-xl bg-gray-400 p-3 text-white;
}

注意

如果是透过 CDN 方式使用 tailwind 的人，下面的内容你可能看不懂，也用不到。但如果有朝一日你会完整安装 tailwind 的功能，那建议你还是可以稍微看一下。

设计的垫脚石

而整理起来的好处，不但是class内变的简短，连带的也可以达到程序码的复用。比如说我页面上的所有按钮都要套用现在设计出来的 `myBtn` 这个样式，我就可以这样做：

<button class="myBtn">
    取消
</button>

<button class="myBtn">
    立即前往
</button>

那我是不是也可以基於已有的 `myBtn` 样式，再加上新的 tailwind 语句，就可以让两个按钮同样版型设计，但颜色不同？ 绝对是可以的！

<button class="myBtn">
    取消
</button>

<button class="myBtn bg-green-500">
    立即前往
</button>

满心欢喜的觉得设计的很棒，但执行之後却发现，颜色没有盖掉，还是原本的颜色...

是不是突然觉得很失望？ 想说 tailwind 这麽好用的东西居然败在这里了吗!? 那接下来正是要看看本篇的重点罗：Tailwind 的渲染顺序。

渲染顺序

废话不多说，直接上表：

如果不看表的话，纯 tailwind 渲染顺序大约顺序是这样。

Tailwind Import 前 → Components → class → Utilities

我们可以很清楚的看到，这渲染顺序就是官方所一直强调的 Utilities First，那如果加入原生 CSS 的话，完整的顺序应该是这样：

原生CSS(Import前) → Tailwind Import 前 → Components → class → Utilities
→ 原生CSS(Import後) → inline style → !important

这边稍微来对表中的一些内容解释一下好了。

Import前的原生CSS

内部顺序的 CSS档顺序 是指依照CSS档内出现的顺序，而非使用顺序。

.a {
 background-color: white;
}

.b {
 background-color: black;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

这个情况下，b 的优先度比 a 高，如果同时使用 a、b，b 的样式会无条件把 a 盖掉。

Import前的@apply

内部顺序的 CSS档顺序 是指依照CSS档内出现的顺序，而非使用顺序。

.a {
 @apply bg-white;
}

.b {
 @apply bg-black;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

这个情况下，b 的优先度比 a 高，如果同时使用 a、b，b 的样式会无条件把 a 盖掉。

Components

内部顺序的 Components区内顺序 是指依照CSS档中 Components 区内出现的顺序，而非使用顺序。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .a {
     @apply bg-white;
    }

    .b {
     @apply bg-black;
    }
}

这个情况下，b 的优先度比 a 高，如果同时使用 a、b，b 的样式会无条件把 a 盖掉。

class

内部顺序的 只会渲染class内第一个碰到的，後面同样式的直接无效 是指class 名称中同样用途的样式，只会渲染第一个，而非使用顺序。这个可能比较难懂，直接看举例：

<button class="bg-green-500 bg-blue-500 text-white">
    立即前往
</button>

这个情况下，只会渲染 bg-green-500 和 text-white，和 bg-green-500 相同用途的 bg-blue-500 并 不会被渲染。 (同样用途的样式，只会渲染第一个)

Utilities

内部顺序的 Utilities区内顺序 是指依照CSS档中 Utilities 区内出现的顺序，而非使用顺序。

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .a {
     @apply bg-white;
    }

    .b {
     @apply bg-black;
    }
}

这个情况下，b 的优先度比 a 高，如果同时使用 a、b，b 的样式会无条件把 a 盖掉。

Import後的原生CSS

内部顺序的 CSS档顺序 是指依照CSS档内出现的顺序，而非使用顺序。

@tailwind base;
@tailwind components;
@tailwind utilities;

.a {
 background-color: white;
}

.b {
 background-color: black;
}

这个情况下，b 的优先度比 a 高，如果同时使用 a、b，b 的样式会无条件把 a 盖掉。

Inline Style

内部顺序的 行内顺序 是指依照style语句行内最後出现的顺序。

<button class="bg-green-500" style="color:red; color:blue;">
    立即前往
</button>

这个情况下，color:blue 的优先度比 color:red 高，如果同时使用 color:red、color:blue，color:blue 的样式会无条件把 color:red 盖掉。

!important

内部顺序的 行内顺序 是指依照style语句行内 !important 最後出现的顺序。

<button class="bg-green-500" style="color:red !important; color:blue; color:yellow !important;">
    立即前往
</button>

这个情况下，优先度是 color:yellow !important > color:red !important > color:blue，如果同时使用 color:red !important、color:blue 和 color:yellow !important，color:yellow !important 的样式会无条件把 color:red !important 和 color:blue 盖掉。

同场加映：Tailwind 的 !important

既然提到 !important，常见的写法就是加在 css 档或是加在 inline style ，尤其时你在用 Bootstrap 的时候 。但其实 Tailwind 里面也可以加上 !important，只是我没有很建议，不过你如果要加，这边要稍微注意一下：

加在 css 档内的 @apply 指令後面是有效的

.btn {
 @apply bg-green-500 !important;
}

想要像其他 tailwind 语法一样加在 class 名称中是无效的

<button class="btn bg-green-500 !important">
    立即前往
</button>

测试结果

这边有完整的渲染顺序测试结果，有兴趣的人可以去看一下。