Tailwind CSS 导论

HikariLan贺兰星辰

发布于 2023-10-18 15:38:21

1980

发布于 2023-10-18 15:38:21

文章被收录于专栏：HikariLan's Blog

由 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，可能需要这么写：

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

<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 时，我们被要求引入如下样式：

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

@tailwind components;

@tailwind utilities;

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

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

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

将标题元素去样式化

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

列表默认无样式

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

多媒体元素块级化。

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

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

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

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

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

全局重置边框样式

*,
::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 样式设置：

<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 标签实现根据子元素奇偶排序应用不同的样式：

<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 样式，最小化编译结果。