TailwindCSS：效用优先
<https://www.tailwindcss.cn/docs/utility-first>
效用第一的基本原理
从一组受限的原始实用程序构建复杂的组件。
概述传统上，每当您需要在网络上设计某些内容时，您都会编写 CSS。使用定制设计需要定制 CSS 的传统方法
<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;
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;
padding-top: 0.25rem;
}
.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
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-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 和 padding 实用程序（flex、shrink-0 和 p-6）用于控制整体卡片布局
最大宽度和边距实用程序（max-w-sm 和 mx-auto）用于限制卡片宽度并将其水平居中
用于设置卡片外观样式的背景颜色、边框半径和框阴影实用程序（bg-white、rounded-xl 和 Shadow-lg）
用于调整徽标图像大小的宽度和高度实用程序（w-12 和 h-12）
space- Between 实用程序 (space-x-4) 用于处理徽标和文本之间的间距
用于设置卡片文本样式的字体大小、文本颜色和字体粗细实用程序（text-xl、text-black、font-medium 等）
这种方法使我们能够实现完全自定义的组件设计，而无需编写一行自定义 CSS。
现在我知道你在想什么：“这是一场暴行，真是一团糟！”你是对的，这有点丑陋。事实上，当你第一次看到它时，几乎不可能认为这是一个好主意——你必须实际尝试一下。
但是，一旦您真正以这种方式构建了一些东西，您很快就会注意到一些非常重要的好处：
您不会浪费精力发明类名。不再需要添加像 sidebar-inner-wrapper 这样的愚蠢的类名只是为了能够设计某些东西，也不再为实际上只是一个 Flex 容器的东西的完美抽象名称而烦恼。
你的 CSS 停止增长。使用传统方法，每次添加新功能时，您的 CSS 文件都会变得更大。有了实用程序，一切都可以重用，因此您很少需要编写新的 CSS。
做出改变感觉更安全。 CSS 是全局性的，当你做出改变时你永远不知道你会破坏什么。 HTML 中的类是本地的，因此您可以更改它们，而不必担心其他内容会被破坏。
当您意识到使用预定义的实用程序类专门使用 HTML 工作可以多么高效时，以任何其他方式工作都会感觉像是折磨。
为什么不使用行内样式 inline-style
对这种方法的常见反应是想知道，“这不就是内联样式吗？”在某些方面确实如此——您将样式直接应用于元素，而不是为它们分配一个类名，然后对该类进行样式设计。
但与内联样式相比，使用实用程序类有一些重要的优点：
有约束的设计。使用内联样式，每个值都是一个神奇的数字。借助实用程序，您可以从预定义的设计系统中选择样式，这使得构建视觉上一致的 UI 变得更加容易。
响应式设计。您不能在内联样式中使用媒体查询，但您可以使用 Tailwind 的响应式实用程序轻松构建完全响应式界面。
悬停、焦点和其他状态。内联样式无法针对悬停或焦点等状态，但 Tailwind 的状态变体可以轻松地使用实用程序类来设置这些状态的样式。
该组件是完全响应式的，包括一个具有悬停和焦点样式的按钮，并且完全使用实用程序类构建：
<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 text-black font-semibold">Erin Lindford</p>
<p class="text-slate-500 font-medium">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>可维护性问题
使用实用程序优先方法时最大的可维护性问题是管理经常重复的实用程序组合。
通过提取组件和部分，并使用编辑器和语言功能（如多光标编辑和简单循环）可以轻松解决此问题。
<!-- PrimaryButton.vue -->
<template>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
<slot />
</button>
</template>除此之外，维护实用程序优先的 CSS 项目比维护大型 CSS 代码库容易得多，因为 HTML 比 CSS 更容易维护。 GitHub、Netflix、Heroku、Kickstarter、Twitch、Segment 等大公司正在使用这种方法并取得了巨大成功。