Tailwind CSS功能类优先

Tailwind 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 中应用预先存在的类来设置元素的样式。

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-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-gray-500">You have a new message!</p>
  </div>
</div>

在上面的示例中，我们使用了：

使用 Tailwind 的 flexbox 和 padding 功能类 (flex, flex-shrink-0, 和 p-6) 来控制整体的卡片布局
使用 max-width 和 margin 功能类 (max-w-sm 和 mx-auto) 来设置卡片的宽度和水平居中
使用 background color, border radius, 和 box-shadow 功能类 (bg-white, rounded-xl, 和 shadow-md) 设置卡片的外观样式
使用 width 和 height 功能类 (w-12 and h-12) 来设置 logo 图片的大小
使用 space-between 功能类 (space-x-4) 来处理 logo 和文本之间的间距
使用 font size，text color，和 font-weight 功能类 (text-xl，text-black，font-medium 等等) 给卡片文字设置样式

但是，一旦您以这种方式实际构建了一些东西，您就会很快注意到一些真正重要的优点：

您没有为了给类命名而浪费精力。 不需要仅仅为了设置一些样式而额外添加一些像 sidebar-inner-wrapper 这样愚蠢的类名，不必再为了一个 flex 容器的完美抽象命名而倍受折磨。
您的 CSS 停止增长。 使用传统方法，每次添加新功能时 CSS 文件都会变大。使用功能类，所有内容都是可重用的，因此您几乎不需要编写新的CSS。
更改会更安全。 CSS 是全局性的，您永远不知道当您进行更改时会破坏掉什么。您 HTML 中的类是本地的，因此您可以更改它们而不必担心其他问题。
当您意识到在 HTML 中使用预定义的功能类是多么的富有成效时，以任何其他方式工作都感觉像是折磨。