在 Tailwind CSS 中使用 CSS 變數來設定邊框圓角
Tailwind CSS 的作者 Adam Wathan 最近宣布要製作一系列短影片 - Build UIs that don't suck，來分享一些使用 Tailwind CSS 的小技巧。他提到這些技巧他已經使用了許多年，在開發許多 UI 組件時也很常利用這些技巧。
不說別的，光是 Tailwind CSS 作者親自分享，這讓這些技巧很吸引人，我二話不說就訂閱下去等影片更新了。結果第一個影片就讓我學到不少，簡單的水個文章來跟大家分享第一個影片介紹的小技巧吧！
在網頁設計中，有一種設計相當常見，就是一個容器元素包了一個內部元素，這兩個元素都有邊框圓角的效果，也就是 CSS 的 border-radius 樣式。
<div class="... rounded-4xl p-3">
<img class="... rounded-3xl" />
</div>效果大概會像這個樣子。
比較有經驗的前端開發者應該知道，裡面的圖片元素，它使用的 border-radius 數值必須比外面的容器元素小。 因此可以看到容器元素使用 rounded-4xl，而圖片元素是使用 rounded-3xl。
根據 Tailwind CSS 的作者所說，雖然從肉眼上看，樣式效果還不錯， 但實際上這個設定只是很接近正確的數值，並不完全正確。
裡面元素的邊框圓角設定
根據 Tailwind CSS 的作者所說，裡面元素的邊框圓角的數值， 應該是外面容器元素的邊框圓角數值減去內邊距數值。
外面容器的邊框圓角與內邊距分別是 rounded-4xl 與 p-3，背後的數值分別是 2rem、0.75rem。因此圖片元素的邊框圓角數值，應該是 2 - 0.75，即 1.25rem。 所以我們應該將圖片元素的 Class Name 修改成以下的內容。
<div class="... rounded-4xl p-3">
<img class="... rounded-[calc(var(--radius-4xl)-(--spacing(3)))]" />
</div>多虧了 Tailwind CSS 強大的編譯器， 我們可以直接在 Class Name 中使用 CSS 的 calc 函式來進行運算。
這裡的
--spacing(3)為 Tailwind CSS 提供的函式語法。CSS 支援用戶自行宣告函式的功能雖然有提案，但尚未正式支援。
不過這種做法有另外一個問題，如果我想修改容器元素的 border-radius 與 padding 的話， 圖片元素的 Class Name 也同樣需要一起修改，這其實有點麻煩，也不好維護。
使用 CSS 變數
Tailwind CSS 允許你在 Class Name 中宣告 CSS 變數。我們可以使用變數將容器元素與圖片元素的圓角設定連結起來。在 Class Name 中宣告一個 --card-radius 變數與 --card-padding 變數，並在後續的樣式中使用這個變數。
<div
class="... rounded-(--card-radius) p-(--card-padding) [--card-radius:var(--radius-4xl)] [--card-padding:--spacing(3)]"
>
<img class="... rounded-[calc(var(--card-radius)-var(--card-padding))]" />
</div>
rounded-(--card-radius)為rounded-[var(--card-radius)]的簡潔寫法。
如此一來，當我們修改外面元素的邊框圓角，裡面元素的邊框圓角也會跟著一起變更。真的是一個很酷也很實用的小技巧呢。😳
