Tailwind CSS home page
  1. Utility-First Fundamentals

Overview

传统上，每当你需要在网络上设计样式时，你都会编写CSS。

使用传统方法，其中自定义设计需要自定义CSS

ChitChat

You have a new message!

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    align-items: center;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

使用Tailwind，您可以通过在HTML中直接应用预先存在的类来设置元素样式。

使用实用程序类构建自定义设计，而无需编写CSS

ChitChat

You have a new message!

<div class="flex items-center max-w-sm p-6 mx-auto space-x-4 bg-white shadow-lg rounded-xl">
  <div class="shrink-0">
    <img class="size-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

在上面的例子中，我们使用了:

  • Tailwind的[flexbox]（/docs/display#flex）和[padding]（/docs/padding）实用程序（“flex”、“shrink-0”和“p-6”），用于控制整体卡布局
  • 最大宽度和边距实用程序（max-w-sm和mx-auto）用于约束卡片宽度并将其水平居中
  • 用于设置卡片外观样式的背景颜色、边框半径和方框阴影实用程序（bg白色、圆角xl和阴影lg）
  • 用于设置徽标图像宽度和高度的尺寸实用程序（size-12）
  • 实用程序之间的间距（space-x-4），用于处理徽标和文本之间的间距
  • 用于设置卡片文本样式的字体大小、文本颜色和字体粗细实用程序（文本xl、文本黑色、字体中等等）

这种方法允许我们实现完全自定义的组件设计，而无需编写一行自定义CSS。

现在我知道你在想什么，“这是一场暴行，多么可怕的混乱！”你说得对，这有点丑陋。事实上，当你第一次看到它时，你几乎不可能认为这是一个好主意——你必须真正尝试一下。

但是，一旦你真正以这种方式构建了一些东西，你很快就会注意到一些非常重要的好处：

  • 你没有浪费精力发明类名。不再仅仅为了设计样式而添加像“侧边栏内部包装器”这样愚蠢的类名，也不再为真正只是一个柔性容器的东西的完美抽象名称而苦恼。
  • 你的CSS停止增长。使用传统方法，每次添加新功能时，CSS文件都会变大。有了实用程序，一切都是可重用的，所以你很少需要编写新的CSS。
  • 做出改变感觉更安全。CSS是全球性的，当你做出更改时，你永远不知道你会破坏什么。HTML中的类是本地的，因此您可以更改它们，而不必担心其他东西会损坏。

当你意识到只使用预定义的实用程序类在HTML中工作是多么高效时，以任何其他方式工作都会感觉像是折磨。

为什么不直接使用内联样式？

对这种方法的一个常见反应是想知道，“这不是内联样式吗？”在某些方面是这样的——你直接将样式应用于元素，而不是为它们分配类名，然后对该类进行样式设置。

但是，与内联样式相比，使用实用类有一些重要的优势：

  • 使用约束进行设计。使用内联样式，每个值都是一个神奇的数字。使用实用程序，您可以从预定义的[设计系统]（/docs/theme）中选择样式，这使得构建视觉一致的UI变得更加容易。
  • 响应式设计。你不能在内联样式中使用媒体查询，但你可以使用Tailwind的[响应式实用程序]（/docs/response design）轻松构建完全响应的界面。
  • 悬停、聚焦和其他状态。内联样式不能针对悬停或聚焦等状态，但Tailwind的[状态变量]（/docs/hover-focus和其他状态）使使用实用程序类对这些状态进行样式设置变得容易。

该组件完全响应，包括一个具有悬停和聚焦样式的按钮，并且完全由实用程序类构建：

Woman's Face

Erin Lindford

Product Engineer 

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg font-semibold text-black">
        Erin Lindford
      </p>
      <p class="font-medium text-slate-500">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

可维护性问题

使用实用程序优先方法时，最大的可维护性问题是管理通常重复的实用程序组合。

这很容易通过[提取组件和部分]（/docs/reused styles#提取组件和局部）和使用[编辑器和语言功能]（/docs/重用styles#使用编辑器和语言特性）来解决，如多光标编辑和简单循环。

<!-- PrimaryButton.vue -->
<template>
  <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
    <slot/>
  </button>
</template>

除此之外，维护一个实用程序优先的CSS项目比维护一个大型CSS代码库要容易得多，因为HTML比CSS更容易维护。GitHub、Netflix、Heroku、Kickstarter、Twitch、Segment等大公司正在使用这种方法并取得巨大成功。

如果你想了解其他人使用这种方法的经验，请查看以下资源：

更多信息，请查看原子/实用程序优先CSS案例, curated by John Polacek.