TailwindCSS 从零开始 - CSS 传统撰写方式与功能优先的差异

Utility First 功能优先

官方文件给的定义

从组合过的原生功能，来建立起复杂的元件。

传统的 CSS 撰写方式

在介绍 Utility First 之前，先来看一下传统 CSS 怎麽写。

假设我今天要切一个下方画面：

相信一开始没有任何网页前端背景的人，应该是跟我一样，从 HTML + CSS 写出一个所见即所得的静态网页，而一开始写 CSS 会建议使用语意化来命名 class name，然後就会向下方的范例程序码一样，

HTML

<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">你有一则新讯息</p>
  </div>
</div>

CSS

 .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;
  }

看得出来所有的东西都跟 chat 有关，但是只要阶层一多， class 的名称就会越来越长，慢慢的第一时间也越来越难分辨这段是什麽?

另外，要想命名也是非常头痛的事情，如果用 Tailwind 改写会变成如何？

<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">你有一则新讯息</p>
  </div>
</div>

看起来的确有精简一点，虽然最外层的 class 好像变得更长了，可是我却一行 CSS 都不用写！原本要在 CSS 的定义的内容，全部透过 Tailwind 的 Utility-First 的方式呈现在画面上了！

当我第一次接触 Tailwind 的时候，也觉得这样也没有比较好啊！而且变得更繁琐，的确是这样没错，但开始写了以後会发现以下优点：

• 我不必为了命名 class 而伤脑筋，不需要只是要添加某些样式就硬要写类似 .side-wrap 这种为了命名而命名的 class name。
• CSS 档案不会再成长了，传统撰写方式，是每当新增功能的时候，CSS 样式都会变多，使用 Utility- First 的方式，都是可以重用的 class name，几乎不用编写新的 CSS，而且因为共用了 class，就算页面非常多，但因为 class 内容相同，所以 CSS 档案也不会变肥，渲染画面效果更好！
• 不用担心更改後画面坏掉，因为 CSS 是全域的，每次要改一些样式，都会怕整个画面坏掉，因为我修改的地方是 HTML，所以只要专注在我要修改的部分，不用担心会影响到其他样式。

Demo

https://codepen.io/hnzxewqw/pen/RwpJGwW

官方文件是用绝对路径引入图片，因我没有该图片，所以就直接去复制网页中的 SVG 档案。

写这麽多 class，为什麽不写 inline style

inline style 就是在 HTML 上面写上样式，

    <h1 style="color: red;font-size: 24px; padding: 10px 0;">title</h1>

但这样会有一个问题，这只有针对这个 tag 就是 inline style 的权重较高，未来若要修改样式，则需要找到该 tag，而使用 Tailwind 可以透过 class 定义的关系，能够 tailwind.config.js 轻易修改多个样式。

参考资料

• Tailwind CSS - Utility-First