TailwindCSS#

Tailwind CSS 是流行的原子化 css 框架。

原子化 css 是这样的写法：

1
<div class="flex justify-center p-1 border"></div>
2

3
<!-- Equivalent to this -->
4
<style>
5
  .flex {
6
    display: flex;
7
  }
8
  .justify-center {
9
    justify-content: center;
10
  }
11
  .p-1 {
12
    padding: 4px;
13
  }
14
  .border {
15
    border-width: 1px;
16
  }
17
</style>

CSS VS Tailwind CSS#

1
// CSS
2
<div class="container">
3
  <div class="video-list-wrapper">
4
    <div class="first-video-wrapper">main</div>
5
    {#each counts as i}
6
    <div class="other-video-wrapper">{i}</div>
7
    {/each}
8
  </div>
9
</div>
10

11
<style>
12
  * {
13
    box-sizing: border-box;
14
  }
15
  div.container {
16
    width: 1440rem;
17
    padding: 0 64rem;
18
    font-size: 12rem;
19
  }
20
  div.video-list-wrapper {
21
    display: grid;
22
    grid-template-columns: repeat(5, 1fr);
23
    grid-template-rows: repeat(auto-fill, 1fr);
24
    grid-auto-rows: 228rem;
25
    grid-gap: 16rem;
26
  }
27
  div.first-video-wrapper {
28
    background-color: antiquewhite;
29
    grid-row: 1 / 3;
30
    grid-column: 1 / 3;
31
    border-radius: 16rem;
32
    display: flex;
33
    align-items: center;
34
    justify-content: center;
35
    width: 100%;
36
  }
37
  div.other-video-wrapper {
38
    background-color: brown;
39
    border-radius: 16rem;
40
    display: flex;
41
    align-items: center;
42
    justify-content: center;
43
  }
44
  @media screen and (max-width: 720px) {
45
    div.container {
46
      width: 100%;
47
      padding: 0 16rem;
48
      font-size: 12rem;
49
    }
50
    div.video-list-wrapper {
51
      grid-template-columns: repeat(2, 1fr);
52
      grid-gap: 14rem;
53
      grid-auto-rows: 200rem;
54
    }
55
  }
56
</style>

1
// Tailwind CSS
2
<div
3
  class="w-[1440rem] px-[64rem] text-[12rem] max-[720px]:w-full max-[720px]:px-[16rem] max-[720px]:text-[12rem]"
4
>
5
  <div
6
    class="grid grid-cols-5 grid-rows-[repeat(auto-fill, 1fr)] auto-rows-[228rem] gap-[16rem] video-list-wrapper"
7
  >
8
    <div
9
      class="bg-[antiquewhite] row-[1/3] col-[1/3] rounded-[16rem] flex justify-center items-center w-full"
10
    >
11
      main
12
    </div>
13
    {#each counts as i}
14
    <div class="bg-[brown] rounded-[16rem] flex justify-center items-center">
15
      {i}
16
    </div>
17
    {/each}
18
  </div>
19
</div>
20

21
<style lang="postcss">
22
  * {
23
    box-sizing: border-box;
24
  }
25
  @media screen and (max-width: 720px) {
26
    div.video-list-wrapper {
27
      @apply grid-cols-[repeat(2,1fr)] gap-56 auto-rows-[200rem];
28
    }
29
  }
30
</style>

优缺点#

优点#

减少编写样式的代码行数。
快速开发，能够借助其丰富的类库，快速制作原型并迭代设计，非常适合初创的小项目。
使用原子类可以大大减少需要起名的场景。
轻松实现响应式设计。

缺点#

若组件样式过多，则 class 代码会非常冗长 <div className="text-base mg-1 pt-1 pr-1 md:pt-2 md:pr-2 rounded border-solid border-2 border-light-blue-500 bg-blue-500 text-white-500"></div>。
文件大小增加，由于 Tailwind CSS 提供了大量的实用类库，与使用预构建组件的框架相比，虽然采用的是 JIT 的编译策略，还是可能导致较大的 CSS 文件大小。
初学者可能需要花更多的时间熟悉文档中的类命名。
维护和管理成本较高，随着项目的迭代，管理和维护自定义配置可能会变得复杂，尤其是对于大型且自定义配置较多的项目。

代码检查和约束#

eslint 插件使用 eslint-plugin-tailwindcss，根据文档安装即可。
Prettier 插件使用官方有提供的 prettier-plugin-tailwindcss，根据文档安装即可。需要注意的是从 v0.5.x 开始，此插件现在需要 Prettier v3，文档有详细说明。

总结#

Tailwind CSS 本质上就是个 postcss 插件。postcss 通过 AST 拿到 @tailwind、@layer、@apply 这些它扩展的指令，分别作相应的处理。所以说，Tailwind CSS 就是基于 postcss 的 AST 实现的 CSS 代码生成工具。