Tailwind CSS · 開源專案

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

它快速、靈活且可靠——零執行時期。

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

概述

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

html

<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 中，我們使用了：

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

概述

分享