每日C ss 系列 - 三個 Tailwind 實用案例

Description

Tailwind CSS 你該知道的實用範例，space、group、peer，不僅僅是像是在寫 inline style 而是用更簡潔的描述達成樣式效果

每日 C 系列前言

我是個設計出身的前端工程師，對於畫面算是蠻有自己的想法也會在意很多的細節，不過近期所開發的產品類型屬於 CMS 系統，會在邏輯、狀態管理上比較著重，樣式方面簡直好久沒有 C 了，有也都是用淺淺的。剛好最近 CSS 也多了些新寫法，像是 CSS Nesting (雖然支援度還不高)、新的 selector :has :where :is 等等，豈能讓自己不持續更新一下新技術，因此每天都要 follow 一些相關知識點，積攢一些就 po 上來，看看能堅持多久

身為前端 CSS 是很重要滴，千萬不可以像這樣啊 ⬇

此篇大綱

Tailwind CSS 基本用起來很簡單就像是在寫 inline style 不過還是有很多被封裝過的語法可以快速達成一些期望效果，這篇來分享以下三個用例

space vs. gap

兩個都是用來控制其 children element 的間距離，不過 gap 需作用在 Flex or Grid box 裡，,且他是原生 CSS 屬性 ; space 是 tailwind 封裝的 utility，通過計算給 children element 以 margin 推出間距。

practical example

Customizing your AAA
Extracting classes with BBB
Code completion with instant preview

這樣子的排版，以下兩種寫法都是長這樣，可以想想當下使用場景為了做出間距，有沒有必要用上 Flex，再用 gap

<ul className="flex flex-col gap-4 p-4 border border-red-300 border-solid">
  <li>Customizing your AAA</li>
  <li>Extracting classes with BBB</li>
  <li>Code completion with instant preview</li>
</ul>

其實也可以只用 space 達成

<ul className="space-y-4 p-4 border border-red-300 border-solid">
  <li>Customizing your AAA</li>
  <li>Extracting classes with BBB</li>
  <li>Code completion with instant preview</li>
</ul>

conclusion

可以少寫兩個 class ，賺爛了 (適用於結構單純場景)

peer

綁定 sibling element，使其有相依性並可依照 A element 狀態定義 B element 樣式。

通常搭配 pseudo-class 一起服用 e.g.

peer-disabled
peer-focus
peer-required
peer-invalid
peer-checked
還有很多請自己去找

這個的應用場景大多都會是用在 interactive elements 上，e.g. 一個輸入框有 invalid 的時候要跳出錯誤訊息，錯誤是出在 input element 上，訊息則要出現在他的下方，可能是個 span 這時候就可以 peer 一下了

practical example

可用在像是 Netflix 登入時候的輸入框效果(一)，或是錯誤提示的顯示(二)

請大哥輸入您的信箱

大姐您輸錯了

<label class="block">
  <span class="block text-sm font-medium text-slate-700">Email</span>
  <input type="email" class="peer" />
  <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
    Please provide a valid email address.
  </p>
</label>

注意只有在前面的 element 才可以被標記 peer

conclusion

同層相依樣式的好夥伴

group

基本上跟樓上的撰寫方式一樣，差別在 peer 是同輩 group 是老爸，標記 group 綁定 children element，使用多層時候以 group/{name} 多個標識符即可，如此一來將可以很彈性的個別定義效果

practical example

Allen Wang

Frontend developer

Call Me

當第一層 <div> 被 hover 的時候下層的 <a> 會顯示，因為用了相同的標識符 group/item 此時要再 hover 到 <a> 再下層的 <span> 跟 <svg> 才會有另外的效果，因為有定義另外的 group/edit

<div
  className="group/item relative flex items-center justify-between rounded-xl p-4 bg-slate-100 hover:bg-slate-200 cursor-pointer"
>
  <div className="...">
    <div className="...">
      <img className="..." src="/images/Allen_Avatar.png" alt="" />
    </div>
    <div className="w-full text-sm leading-6">
      <span>Allen Wang</span>
      <div className="text-slate-500">Frontend developer</div>
    </div>
  </div>
  <a href="#" className="group/edit invisible hover:bg-slate-300 group-hover/item:visible ...">
    <span className=" group-hover/edit:text-gray-700 ..."> Call Me </span>
    <svg></svg>
  </a>
</div>

conclusion

子層相依樣式的好夥伴