Tailwind CSS 导论

由 ChatGPT 生成的文章摘要

Tailwind CSS 导论博主介绍了Tailwind CSS这款效用优先的CSS框架。通过组合预定义的class来直接在HTML中构建任何设计。博主以一个卡片UI的例子对Tailwind CSS进行了解释，比较了使用Tailwind CSS和不使用Tailwind CSS的代码量差异。使用Tailwind CSS可以通过简洁的class描述HTML样式，从而减少代码量和提高开发速度。博主还阐述了Tailwind CSS在样式重置和快速样式实现方面的优势。最后，博主提到Tailwind CSS适合使用组件化HTML框架的开发者和需要快速开发的开发者。推荐读者前往Tailwind CSS文档了解更多信息。

Tailwind CSS 导论

作为前端开发，您是否曾经为在 HTML 和 CSS 之间不断切换而感到困扰？是否正在寻找一个可以帮助快速开发网页的 CSS 框架？如果是这样，那么 Tailwind CSS 一定是你的不二之选。

什么是 Tailwind CSS

Tailwind CSS 是一款效用优先的 CSS 框架，其包含了 flex, pt-4, text-center 和 rotate-90 这样的 class 来帮助你通过组合这些类来直接在标记中构建任何设计。(A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.)

直接看概念似乎有些难以理解，因此我们以官网上的一个例子来解释：

在我们没有使用 Tailwind CSS 之前，如果想要构建一个卡片 UI，可能需要这么写：

代码语言：javascript复制

<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 CSS 之后，我们只需要这么写：

代码语言：javascript复制

<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 CSS 为我们提供的预构建的 class 对元素的样式进行了描述，而不是通过自定义的 class 和自定义的 CSS。通过这些一眼就能看懂意思的 class 描述 HTML 样式，我们得以使用更少的代码量和更快的开发速度完成我们想要的样式，而这就是 Tailwind CSS 的魅力。

Tailwind CSS 好在哪

对于我来说，Tailwind CSS 从两个角度提升了我们的开发效率：

通过样式重置的方式来保证为不同浏览器提供相同的元素外观

在安装 Tailwind CSS 时，我们被要求引入如下样式：

代码语言：javascript复制

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

其中 base 样式被 Tailwind CSS 称作 Preflight，其目的是重置浏览器为我们提供的元素的默认样式，使之仅用于表达语义，而不含样式信息；同时，其还修改了一些元素在浏览器的默认展示行为，在提供现代化样式标准的同时统一了浏览器之间的样式不一致问题。Preflight 对浏览器元素的修改大致如下：

移除了元素的默认 margin 边距，使其不依赖于浏览器的不同标准

代码语言：javascript复制

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

将标题元素去样式化

代码语言：javascript复制

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

列表默认无样式

代码语言：javascript复制

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

多媒体元素块级化。

浏览器默认设置这些多媒体元素的 display 为 inline，Tailwind CSS 将其默认设置为 block，是之更符合设计直觉。

代码语言：javascript复制

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

图片和视频元素默认撑满父元素

这使得我们可以更好地控制这些元素的大小，避免产生元素溢出。

代码语言：javascript复制

img,
video {
  max-width: 100%;
  height: auto;
}

全局重置边框样式

代码语言：javascript复制

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

虽然 Preflight 只是 Tailwind CSS 的一个可选功能，但是其实际上体现了 Tailwind CSS 现代化的设计模式，解决了很多原生浏览器的样式缺陷，方便了开发者的使用。

使用 class 来代替 inline css 以提供快速的样式实现

很多人看到了前面的示例可能会想问，这和 inline css 有何区别。确实，本质上来说他们区别不大，但是，Tailwind CSS 作为 CSS 预处理器，还可以为我们提供原生 inline css 远不能提供的功能，例如，通过伪类选择器实现的基于父类状态的子类 CSS 样式设置：

代码语言：javascript复制

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

在以上代码中，我们为 a 元素设置了 group 标签，同时为子元素设置了 group-hover:... 标签，当鼠标悬浮在 a 元素上时，子元素便可自动改变样式。

甚至，可以通过 odd 和 even 标签实现根据子元素奇偶排序应用不同的样式：

代码语言：javascript复制

<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <!-- Use a white background for odd rows, and slate-50 for even rows -->
      <tr class="odd:bg-white even:bg-slate-50">
        <td>{person.name}</td>
        <td>{person.title}</td>
        <td>{person.email}</td>
      </tr>
    {/each}
  </tbody>
</table>

最后，基于其预处理的功能，Tailwind CSS 也得以做到编译文件最小化，只打包我们使用到的 CSS 样式，最小化编译结果。

Tailwind CSS 适合哪些人

使用组件化 HTML 框架的开发者

Tailwind CSS 的一个缺点其实就是因为我们将样式从原有的 CSS 部分搬到了 HTML 元素上，这使得我们很难重用相同的一套样式。因此，比起原生 HTML 开发者，我更推荐使用组件化 HTML 框架（诸如 Vue，React）的开发者使用 Tailwind CSS，以提高代码的重用性。

需要快速开发的开发者

很多时候我们需要为产品提前产出 MVP 或是 Demo，这时 Tailwind CSS 就成为了一把利器，可以让我们在最短时间内产出成品，简化开发。

最后，前往 Tailwind CSS 文档 来了解有关 Tailwind CSS 的更多信息。

css 开发 开发者 框架 浏览器

0 人点赞