Tailwind CSS

Tailwind CSS 透過掃描您所有的 HTML 檔案、JavaScript 元件以及其他任何模板中的類別名稱，產生對應的樣式，然後將其寫入一個靜態 CSS 檔案。

它快速、靈活且可靠——零執行階段。

從一組受限的基本工具程式建構複雜的元件。

總覽

你透過在標記中直接組合許多單一用途的表現類別（工具類別）來使用 Tailwind 設計樣式：

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
  <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
  <div>
    <div class="text-xl font-medium text-black dark:text-white">ChitChat</div>
    <p class="text-gray-500 dark:text-gray-400">You have a new message!</p>
  </div>
</div>

例如，在上面的 UI 中，我們使用了：

「display」和「padding」工具（flex、shrink-0以及 p-6）來控制整體佈局
「max-width」和「margin」工具（max-w-sm以及 mx-auto）來限制卡片寬度並水平置中
「background-color」、「border-radius」以及「box-shadow」工具（bg-white、rounded-xl以及 shadow-lg）來設計卡片的外觀
「width」和「height」工具（size-12）來設定標誌圖片的寬度和高度
「gap」工具（gap-x-4）來處理標誌與文字之間的間距
「font-size」、「color」以及「font-weight」工具（text-xl、text-black、font-medium等）來設計卡片文字

總覽

生態圈專案

分享