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

显示和内边距工具类（flex、shrink-0和p-6）来控制整体布局
最大宽度和外边距工具类（max-w-sm和mx-auto）来限制卡片宽度并使其水平居中
背景色、圆角和阴影工具类（bg-white、rounded-xl和shadow-lg）来设置卡片的外观样式
宽度和高度工具类（size-12）来设置徽标图片的宽度和高度
间距工具类（gap-x-4）来处理徽标和文本之间的间距
字号、颜色和字重工具类（text-xl、text-black、font-medium等）来设置卡片文字的样式

概述

分享