十分钟快速上手TailwindCss

前言

TailwindCss最近确实是非常火，部门内的多个新增项目已经从开始的css预编译器转换到了TailwindCss或者UnoCss,进行试用。本文先跟我快速上手一下tailwindcss，另外预定下一篇文章主题是UnoCss（这个框架有部分同事觉得非常好用）。
其实在我刚开始用的时候，我也会觉得，这怎么写了一坨么，怎么维护，但后来越写越流畅，啊，真香。

TailwindCss

简介

Tailwind CSS 是一个用于快速构建现代网站和应用程序的实用工具优先的 CSS 框架。它提供了一套丰富的 CSS 类，可以用于快速构建各种 UI 组件。这意味着你可以根据自己的需求，选择使用哪些 CSS 类，而不是被迫使用所有的 CSS 类。这使得 Tailwind CSS 的 CSS 文件非常小，可以快速加载和渲染页面。

Tailwind CSS 自从开源以来，用户社区就非常活跃，社区贡献的组件库也非常丰富，至于有多火，目前为止github上已经有82.5k star了。

快速上手

TailwindCss中最大的特性就是，它是一个原子化的css框架。

我们传统的css代码是这样写的

1
<div class="aaa"></div>

对应的css是这样写的

1
2
3
4
5
.aaa {
    width: 16px;
    height: 16px;
    font-size: 14px; //...
}

而在TailwindCss中，将每一个css属性都拆分成了单独的类，也就是保持每一个类的原子化属性，不会对其他的类产生影响。在TaliwindCss中，我们只需要这样写

1
<div class="w-4 h-4 text-sm"></div>

其中 w-4 和 width: 16px对应，h-4 和 height: 16px对应，text-sm 和 font-size: 14px对应。如果你不想定义w-4代表的是16px，你可以自定义，比如w-4代表的是20px，只需要在配置文件中修改一下配置即可。 而tailWindCss中提供了大量这种原子类来支持我们快速编写样式。

下面我们从头在工程中引入tailWindCss来使用。

安装及配置

我是基于vite + react创建了一个基础工程，在工程基础上，引入tailwindCss：

1
2
npm install -D tailwindcss
npx tailwindcss init

其中tailwindcss init会生成一个tailwind.config.js文件，这个文件就是tailwindCss的配置文件，其中包含了tailwindCss的配置信息，比如主题、插件等等。接着在生成的配置文件中，添加模板路径：

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

使用

接下来，我们就可以在项目中使用tailwindcss了，启用项目看一下我们刚才写的代码。

1
2
3
<div className="w-full h-12 text-base bg-gray-200">
            Demo
</div>

可以看到，我们刚才写的代码，已经生效了，并且样式也生效了。这里的 h-12 代表的是 height: 3rem; /* 48px */，也就是说tailwindCss为我们内置默认的根元素字体大小是16px，更多的内置样式可以参考官方文档。

如果我们想修改根元素字体大小，可以在配置文件中修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
  theme: {
    extend: {
      fontSize: {
        base: '36px', // 设置根元素的默认字体大小为 36px
      },
    },
  },
  corePlugins: {
  },
}

//或者在自定义指令中修改字体大小
@layer base {
    html {
        font-size: 36px;
    }
}

除了上面最基础的css，我们在日常开发中还会用到伪类和伪元素，下面简单介绍一下其使用方法：

hover 伪类可以直接通过 hover: 前缀来实现。

1
2
3
<button class="bg-blue-500 text-white hover:bg-blue-700">
  Hover Me
</button>

使用after 创建一个内容后的伪元素。

1
2
3
<div class="relative after:content-['*'] after:absolute after:top-0 after:right-0 after:text-red-500">
  This is a div
</div>
  • after:content-[‘*’]：使用 ::after 伪元素并设置其内容为星号 *。
  • after:absolute：将 ::after 伪元素设置为绝对定位。
  • after:top-0 after:right-0：将伪元素的位置设置在右上角。
  • after:text-red-500：伪元素的颜色为红色。

另外，在我们开发响应式页面的时候，需要根据不同大小设置不同样式，同样tailwindcss也为我们内置了对应的断点原子类

1
2
3
<div className="w-full h-12 text-base bg-gray-200 md:bg-blue-400">
    Demo
</div>

其中 md:bg-blue-400 代表的是在md断点下，背景色为蓝色。md代表的是max-width: 768px;超过这个断点，背景色就会变成蓝色。其实现原理也就是通过@media做媒体查询来设置不同样式。

以上就能解决我们在日常开发中遇到的大多数问题了，不过难免会遇到一些多个重复样式需要组合的情况，这个时候就需要用到自定义指令了。

1
2
3
4
5
6
<div>
    <div className="w-full h-12 text-base bg-gray-200 md:bg-blue-400"></div>
    <div className="w-full h-12 text-base bg-gray-200 md:bg-blue-400"></div>
    <div className="w-full h-12 text-base bg-gray-200 md:bg-blue-400"></div>
    <div className="w-full h-12 text-base bg-gray-200 md:bg-blue-400"></div>
</div>

比如我们有多个同样的div样式，这样每次修改就比较麻烦，最好通过自定义指令抽离成我们公共的样式，可以通过@layer或者 @apply 指令来扩展

1
2
3
4
5
6
7
8
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
    .my-div {
        @apply w-full h-12 text-base bg-gray-200 md:bg-blue-400;
    }
}

这样该样式就可以直接通过 my-div 来使用了。

1
2
3
4
5
6
<div>
    <div className="my-div"></div>
    <div className="my-div"></div>
    <div className="my-div"></div>
    <div className="my-div"></div>
</div>

实现原理

tailwindcss是通过postcss-preset-tailwind来实现的，其核心原理就是通过解析css文件，将css文件中的class名称替换成对应的css样式。

所以说，tailwind 本质上就是个 postcss 插件。

postcss 是一个 css 编译器，它是 parse、transform、generate 的流程。

而 postcss 就是通过 AST 来拿到 @tailwind、@layer、@apply 这些它扩展的指令，分别作相应的处理，也就是对 AST 的增删改查。

总结

以上内容阅读之后，基本上就可以在项目中畅通无阻的使用tailwindcss了。总结下来tailwindCss的优缺点还是比较明显的：

优点：

  • 开发效率高，提供大量内置工具类
  • 高度灵活，支持响应式设计与自定义配置
  • 避免命名冲突，且能生成较小的生产环境 CSS 文件

缺点：

  • 可能导致 HTML 杂乱，初期学习成本较高
  • 违反了传统的关注点分离，难以复用复杂样式
  • 对某些高度定制化设计支持较弱

个人感觉其比较适用以下场景：

  • 小型或中型项目：由于开发效率高，小型到中型项目可以快速构建和迭代。
  • 产品快速原型设计：借助大量的预设样式，能够快速构建 UI，适用于 MVP 或快速验证产品想法的场景。
  • 组件库开发：通过 Tailwind 定义可复用的 UI 组件，在团队内部形成统一的设计系统和风格。
  • 响应式设计：Tailwind 的响应式工具类能够非常方便地适配不同屏幕尺寸，适用于移动优先或多端适配项目。