TailwindCSS简介

在传统的C端Web页面（指门户网站、个人博客、社区论坛等）开发中，编写并调试大量CSS代码是一个繁琐的过程，这不利于页面的快速迭代。TailwindCSS是一个用于快速定制和构建Web页面的CSS框架，它是基于原子类设计的，它将常用的CSS封装成诸如bg-white（设置背景为白色）、p-4（设置内边距为1rem）的CSS原子类，我们直接在HTML上标签组合使用这些类即可，而不必再编写具体的CSS代码。

不过这里也要注意，使用TailwindCSS并不意味着你可以在不懂CSS的情况下直接写出合适的样式，相反你必须十分熟悉原生CSS才能用好TailwindCSS。

官方网站：https://tailwindcss.com/

TailwindCSS的设计理念

如果使用过BootStrap就会发现TailwindCSS和它有些神似，尤其是CSS类的定义和使用方式。但这里必须指出，TailwindCSS是一个CSS框架而BootStrap是一个组件库，TailwindCSS不包含“组件”，它只有CSS样式的原子类；此外TailwindCSS也预留了足够的扩展空间供我们自定义，TailwindCSS的设计思路更加现代，也更符合未来的技术趋势。如果你喜欢BootStrap，你也一定会喜欢TailwindCSS。

实际上在Web页面开发的发展中，开发人员对CSS样式的使用可以大致归结为这几种方式：

  • 使用原生CSS以及原始的CSS预处理器（如Less、Sass等），开发编写的代码量很大，因此较为麻烦
  • 直接使用组件库如BootStrap、AntDesign等，这类组件库封装度高但实现定制化则较为复杂，一般都是在其上覆写CSS
  • 使用类似TailwindCSS的原子化CSS框架，或者基于TailwindCSS定制封装组件

TailwindCSS的设计遵循了一些设计理念：

原子化CSS类：按照官网的说法叫Utility-First（零件化，原子化），TailwindCSS提供了大量的原子类，每个原子类都是精心设计的单一功能的CSS属性，我们组合使用这些原子类就可以快速实现页面样式，无需编写大段的CSS，又不用担心封装程度过高，还省去了给CSS类起名的苦恼。以按钮为例，如果使用原生CSS，可能要编写十几行代码来实现其样式；如果使用“组件库”实现，我们要定制修改按钮的样式就比较困难，只能在其之上覆写CSS，这是很别扭的做法，TailwindCSS中没有这类的高度封装。

响应式设计：TailwindCSS对响应式设计的支持极佳，如果使用原生CSS，我们需要编写大段的媒体查询来实现响应式设计，使用TailwindCSS提供的响应式的原子类能够极大的简化这类代码的编写。

可定制性：TailwindCSS预留了足够的扩展空间给我们，通过调整tailwind.config.js配置文件，我们可以对各种功能的原子类表现进行定制。

专业的默认样式：很多个人开发者可能掌握Web开发技术，却对UI设计不怎么了解。TailwindCSS的原子类封装的默认值例如颜色等，是十分专业和考究的，即使没有专业的UI设计图，在这种恰到好处的约束下，随意组合TailwindCSS的原子类也不会出现太大的违和感。

TailwindCSS的优缺点

相比使用原生CSS或是Less等CSS预处理器，使用TailwindCSS的好处有很多，首先它简少了代码量，提升了代码的可读性，构建后的体积在工程规模较大时也比盲目直接写CSS输出的体积更小；其次我们习惯使用这些原子类后页面的样式也会变得更加统一，而不会出现直接写CSS时陷入细节中而出现样式前后不一致的情况。

当然，TailwindCSS也不是毫无缺点。首先它是有学习成本的，存在较高的心智负担，可能不适合大多数（尤其是国内的）团队；其次TailwindCSS不像原生CSS能够直接被浏览器识别，需要一个构建的过程，给工程构建和配置带来了额外的复杂性；此外，也有很多人认为TailwindCSS给那种完全还原设计图的开发方式带来了额外的困难，因为UI设计师给出的设计图通常不能和TailwindCSS的原子类完全契合，在其上覆写CSS还不如从一开始就不用TailwindCSS；最后，TailwindCSS的一个广受诟病的点是可能导致HTML标签的class属性过长，不太美观，实际开发中我们就会体会到这一点。

总而言之，TailwindCSS是功能强大、设计非常现代化的一种CSS框架，它可能更适合个人开发者或是技术导向的小团队，在具体选择使用时，开发者需要权衡其优缺点，根据具体的使用场景做出选择。

在工程中引入TailwindCSS

下面我们具体介绍如何在工程中引入并使用TailwindCSS。

安装VSCode插件

TailwindCSS中有一些自定义的指令，编辑器可能无法正确识别，这里以目前使用最广泛的VSCode为例，我们需要在具体使用TailwindCSS前安装Tailwind CSS IntelliSense插件。

安装完成后，VSCode就可以正确对TailwindCSS相关的代码进行智能提示了。

通过TailwindCLI使用TailwindCSS

使用TailwindCSS最简单的方式是使用TailwindCLI，它是一个命令行工具，能够扫描我们的HTML代码，并将TailwindCSS原子类的引用构建为原生CSS以供浏览器读取。我们这里以一个原生Web工程为例进行介绍。工程目录结构如下：

|_index.html         // HTML页面
|_app.css            // tailwindcss的入口文件
|_output.css         // 编译输出文件
|_tailwind.config.js // tailwindcss的配置文件
|_package.json       // 工程描述文件

安装tailwindcss依赖。

npm install -D tailwindcss

执行tailwindcss工具命令npx tailwindcss init，生成tailwind.config.js配置文件。当然，我们也可以直接创建该文件。在配置文件中，我们配置使用TailwindCSS的模板文件，我这里配置了HTML文件。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

在app.css中，我们配置所使用的TailwindCSS组件，这些配置使用了TailwindCSS自定义的@tailwind指令，表示引入对应的组件。

@tailwind base;
@tailwind components;
@tailwind utilities;

注意其中引入的base组件，它包含了一组被称为preflight的通用样式，包括去掉浏览器的默认边距、去掉列表的默认样式、全局使用border-box等设置。我们自己开发时通常也要编写这一大段的初始配置，使用TailwindCSS就可以省去这个步骤了。

配置好app.css后，我们使用TailwindCLI启动构建，命令如下，它将监听我们的工程文件，并实时构建output.css。

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

最后我们编写HTML文件，引入TailwindCSS输出的CSS文件，并使用TailwindCSS的原子类编写样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="output.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="p-4 rounded shadow-lg w-1/4 bg-white text-gray-700">
        Hello, world!
    </div>
</body>
</html>

在Umi工程中使用TailwindCSS

这里我们再介绍下如何在Umi工程中使用TailwindCSS，Umi的工程集成度很高，实际上我们不需要手动进行配置，我们直接使用Umi提供的“微生成器”即可自动安装配置TailwindCSS。

npx umi g tailwindcss

执行命令后，Umi会自动下载安装TailwindCSS依赖以及进行工程配置，此时我们就可以在JSX中使用TailwindCSS提供的原子类了。

<h2 className='bg-red-50'>Yay! Welcome to umi!</h2>

在其它框架中使用TailwindCSS

TailwindCSS的官网对各种框架集成TailwindCSS都有详细的文档，我们具体参考文档即可。

https://tailwindcss.com/docs/installation/framework-guides

善于在文档中进行搜索

在实际开发中，我们没有必要把TailwindCSS提供的类名全都记住，如果想要实现某一效果的时候忘记了TailwindCSS原子类的名字，我们可以直接在官方文档中进行搜索，当然，TailwindCSS的原子类设计的可读性都很高，基本可以做到见名知意，配合VSCode插件的智能提示，开发效率绝对秒杀直接写CSS、Less等开发方式。

作者：Gacfox
版权声明：本网站为非盈利性质，文章如非特殊说明均为原创，版权遵循知识共享协议CC BY-NC-ND 4.0进行授权，转载必须署名，禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap