注

https://tailwindcss.com/docs/styling-with-utility-classes

Tailwind CSS 是一个功能类优先（utility-first）的 CSS 框架，它提供了大量如 flex、pt-4、text-center 和 rotate-90 这样的工具类，让开发者可以直接在 HTML 标签中组合这些类来构建任何设计。

核心概念

工具类

Tailwind 的工具类是基于 css 的 class 来实现的，所以可以像使用 class 一样使用 tailwind 的工具类。比如

• 显示和填充工具类（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 等）来美化卡片文本

<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">您有新的消息!</p>
  </div>
</div>

层级

在 Tailwind CSS 中，@layer 是一个用于组织和扩展 CSS 的功能，它把样式分为三个主要层级（layer）：

三个层级分别是：

Layer	说明	使用场景
base	基础样式，比如设置 body、h1、p 等元素的默认样式	重置样式或设置页面全局默认样式
components	组件样式，比如按钮、卡片、表单元素等可以重复使用的 UI 组件样式	定义自定义组件的类，如 .btn, .card 等
utilities	工具类样式，也就是类似 text-center、bg-red-500 这样的原子类	用于添加新的工具类，或自定义工具类

自定义工具类 Layer utilities

主题变量是通过 @theme 指令定义的特殊 CSS 变量，它影响您项目中存在的工具类。

@import "tailwindcss";

@theme {
  --spacing-header: var(--header-height);
  --max-width-container: var(--container-width);
  --color-primary: var(--theme-color);
}

<div class="text-primary mt-header max-w-container">Hello World</div>

自定义组件 Layer components

对于常用的较为复杂的样式，可以自定义组件类。

@import "tailwindcss";

@layer components {
  .btn-primary {
    border-radius: calc(infinity * 1px);
    background-color: var(--color-violet-500);
    padding-inline: --spacing(5);
    padding-block: --spacing(2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-violet-700);
      }
    }
  }
}