[Tailwind CSS] 自訂元件(component)

分享:

不同於 bootstrap 這種 UI Framwork 一樣幫我們整理好了許多好用的元件(component),Tailwind CSS 本身並沒有那麼多現成的元件,也就是說如果我們想要一個按鈕可能得這樣組合他提供的 CSS:

<!-- Before extracting a custom class -->
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
  Save changes
</button>

只是這樣組起來就好像回復到以前用 inline-style 寫 CSS 一樣,看起來會有點煩躁,而 Tailwind CSS 就有提供我們自訂 class name 並把內建的樣式組合的方法,像是如果我們最後想要用一個 class name 來設定按鈕樣式:

<!-- After extracting a custom class -->
<button class="btn-primary">
  Save changes
</button>

 

在 Tailwind CSS 裡我們就可以利用 @apply 來設定:

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

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

這樣就能讓我們的 CSS 更好維護了。

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。