iT邦幫忙

1

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 前ComponentsclassUtilities

我們可以很清楚的看到,這渲染順序就是官方所一直強調的 Utilities First,那如果加入原生 CSS 的話,完整的順序應該是這樣:

原生CSS(Import前)Tailwind Import 前ComponentsclassUtilities
原生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-500text-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:redcolor:bluecolor: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 !importantcolor:bluecolor:yellow !importantcolor:yellow !important 的樣式會無條件把 color:red !importantcolor: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>

測試結果

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


尚未有邦友留言

立即登入留言