環境介紹完，也終於開始進入重頭戲，在 Tailwind 的介紹中，第一大點就在介紹 utility 的優勢所在，這裡我也分享 Tailwind 文件裡所寫的 utility first 的優勢所在。
sidebar-inner-wrapper，因為所有都是 utility class，例如 .mt-1、.tetx-xl
所謂的 inline 寫法就像是 <div style="color:red">內容</div>，而作者也有解釋 utility 與 inline-style 的差異點有三種：
.mb-1，也就是 margin-bottom 向下推一個單位，今天單位有改時，直接改 Tailwind.config.json 變更 .mb-1 單位就好。md:text-6xl ，意思是 md 斷點以上字變大 6xl 的 sizehover:color-blue-500，任何你想像得偽類都有，例如 focus、active 等等，文件表。以上 2、3 點真是讓人心動，而且就算你自己有新增擴充 Tailwind 樣式，也可以很無痛讓他能支援 RWD 與偽類，實在方便到個並軌 XD
@layer介紹傳送門：【Tailwind CSS 教學 - 10】新增 component 元件方式 (新增於 2020/10/16)
補充一下：
在 Tailwind CSS 裡擴充 class 時，是要套上 @layer：
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.card {
@apply ...;
}
}
簡單來說，上面編譯完後會等同於下面：
@tailwind base;
@tailwind components;
.card {
@apply ...;
}
@tailwind utilities;
參考：
感謝幫忙補充 :D
有沒有想了解的 Tailwind 或其他 CSS 議題？可以幫你穿插在 30 天內 XD
想要了解 Flex 和 Grid
包括純 CSS 和 Tailwind 使用方式
(因為我都只略知一二 XD)
正在同步學習中ＸＤ 感覺真的很方便~
感覺如果用Component Base的Framework(React/Angular/Vue)來開發，utility class反而是優點，畢竟我們是Reuse Component程式碼,class是伴隨著Component的^^///
iThome鐵人賽
看影片追技術