上手使用 TailwindCSS

在网页开发中，CSS 控制着页面的布局、样式，决定了"好不好看"。这篇上手 CSS 简单介绍了如何使用 CSS 去影响页面的样式

CSS 的维护成本

随着项目规模的不断扩大，对 CSS 的维护也变得复杂起来：

CSS 文件不断增多，项目体积变大
添加样式的过程中，需要定义大量的 class 去标记元素，命名一个准确简洁的 class 需要花不少时间
有时还会出现样式冲突的情况，同事在项目中添加了一个新页面，我自己页面的样式却出了问题
有一些组件或元素在迭代中已经被删除，但与其相关的被废弃的 CSS 依然存在

对于上面这些问题，不同的 CSS 框架或者CSS 预处理器都有着各自的解决方案

这篇文章里我们看看 Tailwind 是怎么处理的

安装使用

根据官方文档提供的步骤，我们在本地试用一下

sh 复制代码

# 在本地新建一个项目文件
mkdir tailwind-start
cd tailwind-start

# npm 初始化
npm init

# 为项目添加 tailwind 的依赖
npm install -D tailwindcss

# 使用 tailwindcss 命令初始化 Tailwind
npx tailwindcss init

# 新建 index.html input.css 两个文件
touch index.html input.css

在 input.css 中引入 tailwind

css 复制代码

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

使用 tailwindcss 命令，将 input.css 文件转成 output.css，并监听 input.css 的变化

sh 复制代码

npx tailwindcss -i ./input.css -o ./output.css --watch

在 index.html 中引入 output.css，并添加 tailwind 的 class 来控制样式

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 引入 output.css -->
  <link rel="stylesheet" href="./output.css">
</head>
<body>
  <!-- 这里的 class 就是由 Tailwind CSS 提供的 -->
  <div class="bg-blue-500 text-white p-4">
    My First Tailwind CSS Project
  </div>
</body>
</html>

现在，在浏览器里打开 index.html 就可以看到结果

HTML 代码中的bg-blue-500 text-white p-4 就是 Tailwind 提供的 class

带来的好处

在 Tailwind 的官网写着

Rapidly build modern websites without ever leaving your HTML.

它可以让开发者无需离开模板，更快速地构建页面样式

看一下它和传统 CSS 的写法相比，有哪些优势

直接写在模板里（HTML 标签中），也就是说它和模板是紧密相关的，不用担心删除了组件而忘记删除样式的问题；同时，这样的写法也省去了定义 class 名称的时间；另外，由于直接作用于当前元素，也就不会发生样式冲突的问题
所有的样式 class 都是 Tailwind 内置好的，即使项目规模不断扩大，对应的 CSS 文件也不会变得庞大
除此之外，它还内置了不少方便的功能，如：响应式设计、暗色模式、常用的特殊样式、元素状态等
在 VSCode 中添加 Tailwind 的官方插件，可以更快地书写 Tailwind class

不习惯的地方

由于要把大量的 Tailwind class 写在模板里（这有点类似直接写 style 属性）

标签会变得非常臃肿。在浏览整个组件或模板时，这往往会成为视觉上的干扰

Tailwind 以 class 的形式存在（水平方向去书写），我在众多 class 中寻找一个样式时，也比之前（垂直书写样式）更困难

总结

虽然有一些不适应的地方，但总的来说，我认为它带来的好处是远远大于它的"不方便"的，值得一试