Tailwind 真香

一、导入

在进入 Tailwindcss 主题之前，我们先来聊聊 css 的发展历程，这将有利于理解 tailwind 存在的意义。

CSS 经历了三个阶段：

1. 原生阶段：需要什么就写什么。

2. 组件化阶段：将相同视觉的UI封装成一个组件，像Bootstrap、Element UI、Antd 都是采用这个做法，比如你需要一个按钮，要多次使用并且样式一致，就可以封装成一个按钮类，之后使用就直接用这个类名就ok了。

3. 原子化阶段：其实也是组件化的一种，只不过每个组件都是单一功能的 css 属性。举个例子，我们在页面中需要经常用到 float: left，在原子化思想中，会封装成这样一个类：.left {float: left}

   之后使用就直接给元素添加 .left 类名，这样就不用手动重复去写float:left，极大减少了代码量，真是太友好了！

   好了，接下来回归正题，让我们一起体验一下 tailwind 的真香。

二、Tailwind 是什么

话不多说，先上个代码体验一下，下面引用了官网的例子：
使用传统方式，首先是搭建好html 框架，然后再实现定制化的样式，代码会是这样：

如果采用 tailwindcss ，代码将会是这样：

对比这两段代码，最直观的感受就是：使用 tailwind 的代码量小很多！

这是因为 tailwindcss 提供了各种功能类，我们无需写css代码，直接引用就行。可能有人会说：这不就是 bootstrap 嘛？其实还是有些区别滴，在 bootstrap 中帮我们封装好了一些样式（组合了各种属性），就比如各种按钮，卡片。而在 tailwindcss 中，仅仅是把一个属性封装成一个类，比如bg-white就相当于 background-color: white;，完全可以利用 tailwind 去定制一个属于自己的 bootstrap.

三、Tailwind 的优点

• 无需耗费精力为类命名：为了避免类名冲突，我们总为想一个完美的命名而备受折磨，有了 tailwind 再也不用苦恼了，所有的 css 属性 都被框架语义化封装好，只需引用即可。
• 内容可重用：不用因为添加新功能而编写新的 css。
• 可定制化程度高：比如使用bootstrap,若想修改一个按钮，就会比较困难，得用覆盖式的写法，通过自己的样式覆盖掉bootstrap样式
• 响应式设计：采用移动优先设计模式，断点系统灵活。比如可以直接写鼠标滑过，点击等状态的样式，可实现媒体查询功能，根据屏幕大小来自适应。
  还有像可维护性高等其他优点，这些需要大家在使用过程中去一一感受一下。

四、Tailwind 的入门

1. 安装

关于安装，官网上的文档特别详细，不同框架都有相应的指南，这里不都做详细介绍，只举了一个在 react 项目中安装 tailwind css 例子，详细可前往
tailwind 安装查看。

1. 创建 react 项目

$ npx create-react-app my-project --template typescripts
$ cd my-project

2. 安装 tailwind css

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3. 安装配置 craco

npm install @craco/craco

4. 更新 package.json 文件中的 scripts，将 eject 以外的所有脚本都用 craco 代替 react-scripts
   
5. 在项目根部创建一个 craco.config.js，并添加 tailwindcss 和 autoprefixer 作为 PostCSS 插件。

//craco.config.js
module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

6. 创建配置文件，生成 'tailwind.config.js' 文件

2. 十一种类别

各类名具体信息可访问tailwindcss.cn

1. 布局
   container、display、float、object-fit、object position、overflow、position、visibility、z-index
   容器：与bootstrap 的容器相似，两者功能相同，即将元素包装在内部并在当前断点处设置 min-width、max-width。不同的地方在于 tailwind 的容器不会自动位于中间，要使其位于中间必须调节 margin-left和margin-right为auto
2. 排版
   font-size, font-family, color,font-weight, word-break, letter-spacing等
3. 背景
   类名以 bg-* 开头，比如：bg-cover 将背景大小设置为cover
4. 边框
   颜色、宽度、样式：border-*
   半径：rounded-*
5. Flexbox
   flex direction, flex wrapping, align items, align content, align self,justify content, flex, flex grow 和 flex shrink
6. 间距
   填充、边距、负边距
7. 尺寸
   w -{number}、h-{number}、min-w-{number}、max-w-{number}
8. 表格
   包括2个实用工具，border collapse 、table layout
9. 效果
   阴影：.shadow-*
   不透明度：.opacity-{number}

<div className="opacity-100">opacity-100</div>
<div className="opacity-75">opacity-75</div>
<div className="opacity-50">opacity-50</div>

10. 互动性
    appearance, cursor, outline, pointer events, resize 和 user select ，可以利用这些使用工具类设置光标类型、设置用户是否可以在元素内选择文本以及管理其他交互性等
    

<button className=" bg-blue-600 text-white px-4 py-2 rounded mx-4 hover:bg-pink-500 hover:text-black ">button</button>

当鼠标经过按钮时，按钮背景变成粉色，同时文字变成黑色

11. SVG
    包括填充 Fill 和笔触 Stroke
    fill-current：将 svg 颜色设置为“当前”文本颜色
    stroke-current

3. 自定义组件

光说不练假把式，下面就给大家呈现两个小组件。

1. 按钮
   

<button class=" bg-blue-600 text-white px-4 py-2 rounded mx-2 ">Primary</button>
<button class="bg-green-500 text-white px-4 py-2 rounded mx-2 ">Success</button>
<button class="bg-red-500 text-white  px-4 py-2 rounded mx-2">Danger</button>
<button class="bg-yellow-500 text-white  px-4 py-2 rounded mx-2 ">Warning</button>

2. 卡片
   

<div class="bg-white shadow-lg w-64 ml-auto mr-auto">
      <img src="https://images.unsplash.com/photo-1504575958497-ccdd586c2997?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&autc==754&q=80" alt="koala" />
      <div className="p-6">
          <h4 className="font-bold">Halo,my name is Koala!</h4>
          <p className="text-sm mt-2">I loves climbing trees and eating.</p>
          <div className="mt-4 text-right">
               <button className="bg-blue-500 text-sm text-white py-1 px-3 rounded">read more</button>
          </div>
       </div>
  </div>

使用 tailwind 提供的功能类名就能轻轻松松搞定一个个性化组件，简直太舒服了，不用手动去写很多css 代码。

五、Tailwind 的缺点

凡事都有两面性，tailwind 也有一定的缺点。

• 熟悉使用需要成本，增加了记忆成本，需要记住一些 class 才能流畅地设计出想要的样式。一开始使用可能觉得麻烦，但用熟了，大多数人都会觉得“很香”，不想回到手写css的时候了。另外 tailwind 的作者还开发了一个用于 vscode 的代码提示插件，能有效提高效率。
• 类名很长。看上面的例子，会发现html的结构变得复杂了，虽然看起来语义化还是不错的，但是在调试的时候很麻烦，有时很难定位到具体的 css 问题
• 文件大，不过可以利用PurgeCSS删除没有使用的样式代码，这样文件就小很多了。

六、总结

不同的框架都各有各的优缺点，使用 tailwindcss ，还是 bootstrap，或者其他UI框架，还是得根据项目的特点以及团队或个人的喜好去决定。比如一个项目，如果需要快速或者简单交付，那没必要用 Tailwind CSS，用bootstrap 会来的更快些。