Tailwind

Tailwind是什么，一言以蔽之：在html class里写样式。

用法

对于一个偏视觉设计的组件，你通常需要写很多CSS

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">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，只需要改写成Tailwind细分出来的class，大多数情况下不需要写一行CSS

html

<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>

优缺点

优点

不用写类名
CSS不会线性增长，可以尽可能复用样式，减少CSS文件大小
不用写CSS，所以不会有CSS污染问题

缺点

官方承认的缺点：看起来混乱，降低了可读性
不用写类名而缺少标签语义，实践中可能需要为了语义而写无内容的class
写样式时优先考虑复用class，不建议自由地进行样式设计

适用场景

对性能要求高的应用，Tailwind可以控制CSS文件大小收敛到一个较小的值
适用有视觉设计规范的团队，可以避免出现破坏设计规范的情况

综上，Tailwind适合追求高性能、视觉风格统一的团队。
不适用于小规模、视觉设计灵活、变更频繁的小队，因为Tailwind也带来了学习成本、规范样式类的成本。

Tailwind ​

用法 ​

优缺点 ​

优点 ​

缺点 ​

适用场景 ​

Tailwind

用法

优缺点

优点

缺点

适用场景