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等）来设置卡片文本

概述

生态圈项目

分享