在正式使用之前，我們先來介紹 Tailwind 操作上的核心概念吧！Let's go.

一、核心概念

• utilities classes

utilities 是 Tailwind 運行的核心概念，先舉個例子方便說明，先附上純 CSS 的程式碼：
[HTML]

    <div class="chat-notification">
      <div class="chat-notification-logo-wrapper">
        <img
          class="chat-notification-logo"
          src="./images/chat.png"
          alt="ChitChat Logo"
        />
      </div>
      <div class="chat-notification-content">
        <h4 class="chat-notification-title">ChitChat</h4>
        <p class="chat-notification-message">You have a new message!</p>
      </div>
    </div>

[CSS]

.chat-notification {
  display: flex;
  max-width: 24rem;
  margin: 0 auto;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.chat-notification-logo-wrapper {
  flex-shrink: 0;
}
.chat-notification-logo {
  height: 3rem;
  width: 3rem;
}
.chat-notification-content {
  margin-left: 1.5rem;
  padding-top: 0.25rem;
}
.chat-notification-title {
  color: #1a202c;
  font-size: 1.25rem;
  line-height: 1.25;
}
.chat-notification-message {
  color: #718096;
  font-size: 1rem;
  line-height: 1.5;
}

產生結果如附圖：

這裡舉個比較誇張的例子，是以全 CSS 進行開發，讓 Tailwind 形同虛設，但筆者想帶出的觀念是：「任何需要的樣式，要盡可能使用 Tailwind 的 utilities」，只能少數使用手刻 CSS，盡量不手刻 CSS 才能把 Tailwind 的價值最大化。
那以上的程式碼轉換成 Tailwind 的樣式就像：

    <div class="flex items-center max-w-sm p-6 mx-auto space-x-4 bg-white shadow-lg rounded-xl">
      <div class="shrink-0">
        <img class="w-12 h-12" src="./images/chat.png" alt="ChitChat Logo" />
      </div>
      <div>
        <div class="text-xl font-medium text-black">ChitChat</div>
        <p class="text-slate-500">You have a new message!</p>
      </div>
    </div>

這裡全部使用上 Tailwind 的 utilities classes，不僅少了 CSS 樣式，且完全寫在 HTML 上加快開發效率。

• 不用再去想著語意化 class 名稱

這對於筆者這種英文苦手來說真是一大福音，再也不用為了取名而煩惱著，也可不必想著各項命名規則 (OOCSS,BEM,etc.)，只須不斷不斷地著了魔一樣在 HTML 輸入 class 名稱即可。

• CSS 檔案不會肥大

可能大家會覺得說，就算使用 Tailwind 之後，CSS 檔案不肥好了，可是相對的這個檔案大小增加到 HTML 上了，不是嗎？但主要是 utilities 各項 class 其實具有高度的重複使用性，所以在任何需要重複樣式的元素上使用，此時就能避免輸入各項不同的 class 樣式，導致空間浪費；並且也不用自己動腦、動眼揪出有重複性的樣式再進行重構，這不是省了時間也省了空間嗎？

• 修改樣式更安全

相信大家剛開始接觸學習在寫 CSS 的時候，常發生牽一髮而動全身的窘境吧～？這種現象以筆者的經驗通常發生在 li 這種高度重複性的元素，會採用共通性的 class 以維持程式碼的整潔，但專案頁數一多，有可能會修改到樣式的時候，往往改動後面，結果前面的樣式一起變動卻不自覺，最後鑄成大錯；而 Tailwind 的樣式是應用在每一個個別的元素上，所以要修改時僅須對單體元素進行修正，這大大地增加修改樣式的安全性不致莫名翻船。

以上，是 Tailwind 的三大核心理念，尤其是使用過更能深刻體會它的好。

欸，大哥!

照你筆者這麼介紹下來，阿我看這就行內樣式不是嗎？有什麼神通廣大的？
大家別急～在下一篇文章會介紹 Tailwind 與行內樣式有何不同，我們明日再戰！！!