# TailwindCSS->[官網](https://tailwindcss.com/docs/utility-first)

作者在這有提到一些好處，足以改善傳統的CSS樣式，來提升開發速度。
1.You aren’t wasting energy inventing class names
2.Your CSS stops growing
3.Making changes feels safer

那這邊也有提到說*Why not just use inline styles?*
1.Designing with constraints.
舉例：如有多個

<div style="display: flex; height: 150px; flex-wrap: wrap;">

如要修改就會很麻煩重複性很高。
2.Responsive design.在這邊Tailwind也有提供響應式設計
3.Hover, focus, and other states.也有提供hover的寫法。

以下是我寫的DEMO。

<div class="container mx-auto my-4">
  <img src="https://www.apple.com/v/macbook-pro-13/g/images/overview/hero_endframe__bsza6x4fldiq_large_2x.jpg" />

  <div class="my-8 board rounded shadow-lg sm:flex sm:flex-wrap">
    <div class="p-6 border-b sm:w-1/2 sm:border-r md:w-1/3 md:border-b-0 hover:bg-gray-800 group">
      <h2 class="title">微小晶片，宏大躍升。</h2>
      <p class="text-gray-500 group-hover:text-white">我們專為 Mac 設計的第一ㄉ款晶片，現在問世。Apple M1 系統單晶片 (SoC) 滿載驚人的 160 億個電晶體，將 CPU、GPU、神經網路引擎、I/O 等眾多功能，整合在單一微小的晶片上。有了非凡效能、特有的技術與領先業界的能源效率表現1，M1 不僅讓 Mac 跨出一大步，更晉升至全新層次。</p>
    </div>

    <div class="p-6 border-b sm:w-1/2 md:w-1/3 sm:border-r md:border-b-0 hover:bg-gray-800 group">
      <h2 class="title">強大晶片坐鎮，實力堅強。</h2>
      <p class="text-gray-500 group-hover:text-white">M1 晶片使 MacBook Pro 展現超狂的速度與威力。與上一代機型相比，8 核心 CPU 處理效能最快達 2.8 倍2，可輕鬆應對複雜的工作流程與繁重的工作負載，而且，全都以極優異的能源效率輕鬆達陣。</p>
    </div>

    <div class="p-6 md:w-1/3 hover:bg-gray-800 group">
      <h2 class="title">超狂威力，創造華麗。</h2>
      <p class="text-gray-500 group-hover:text-white">M1 中的 8 核心 GPU，是我們歷來所打造最先進的繪圖處理器。它帶來全球個人電腦領域最快速的整合式繪圖處理7，將繪圖處理效能一舉提升到 5 倍之多。</p>
    </div>
  </div>
</div>