如果你 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>

測試結果

這邊有完整的渲染順序測試結果，有興趣的人可以去看一下。