Tailwind CSS - 非常值得一试的CSS框架

相信大家都听说过Bootstrap框架开发响应式页面非常舒服帮我们整合了默认的设计、排版、组件和交互行为但是我想介绍一个开发响应式页面更轻量更灵活的CSS框架 — Tailwind CSS

它是做啥的呢 🤔️

通过一段平常实现元素居中的代码来看看它和我们传统编写CSS样式的不同

<!-- element -->
<div class='element'>
  <h1>Hello World</h1>>
</div>
 
<!-- style -->
<style>
.element {
  width: 100%
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
  font-weight: bold;
}
</style>

在日常开发中无论你是使用flex / grid还是其他的布局我们在样式文件中无限重复地编写着不同的布局样式经常导致我们的CSS样式比整个Component的代码还长

那么我用Tailwind CSS来写这段代码的话会是怎么样呢

<!-- element -->
<div class='w-full flex justify-center items-center text-gray font-bold'>
  <h1>Hello World</h1>>
</div>

或许你会想：啊？这是啥玩意儿？

从代码能看出我们没有单独的写CSS样式而是换成了一系列的className 比如需要编写width: 100%的地方可以使用Tailwind CSS中的w-full类来替换他此时你大概能猜到Tailwind CSS帮我们做了些什么

Tailwind CSS提供了一系列原子类 允许开发者通过组合这些类来构建自定义的样式就像我们在JS代码中经常去做的函数抽象封装避免重复代码提高复用性这里提到的原子类是目前非常流行的原子化 CSS概念

原子化 CSS是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

Tailwind CSS基本上涵盖了所有的CSS样式对应的类它们的职责是单一的从命名可以直观地看出它将带来的视觉效果

It's fast, flexible, and reliable — with zero-runtime.

如何使用它 🔨

官网的Get started with Tailwind CSS已经写得非常详细了这里就不再赘述但是有个小tips

如果你使用的是框架进行开发记得查看的是Framework Guides 里面会详细说明不同框架如何去配置

接着你需要为你的IDE添加Tailwind CSS的插件为了你能更高效更好地进行开发：

WebStorm: Settings -> Plugins -> Tailwind CSS(我这边是默认有安装)
（如果没有的话就去Plugins -> Marketplace安装「Tailwind CSS」即可）
VS Code: 去Marketplace拓展中搜索「Tailwind CSS IntelliSense」下载即可

响应式开发 🛠️️

这时候说回一开始它很吸引我的一点就是可以简单快速的进行响应式页面的开发 它不需要我们再一直写media query 我相信写过的人都懂是多么的烦躁不断地在Ctrl➕C <->Ctrl➕V

在Tailwind CSS默认的Responsive Design配置中已经帮我们预设了各种屏幕宽度的prefix 如果你需要拓展/修改只需要修改tailwind.config.js的screens字段即可：

// tailwind.config.ts
import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      screens:{
        // edit this
        sxl: "1180px",
        // @media (min-width: 1180px){...}
        xs: "480px"
        // @media (min-width: 480px){...}
      }
    },
  },
}
export default config

然后在页面开发中我们只需要根据屏幕宽度来设定对应的prefix:className 就可以达到响应式的效果我举个动态修改宽度/字体大小的🌰

// page.tsx
<div className="w-20 md:w-40 lg:w-60 text-base md:text-2xl lg:text-4xl">
  Hello World
</div>

🤔️w-20是什么意思？
在Tailwind CSS中，类似 w-1 的类名是用于设置元素的宽度的，而数值后面的单位 rem 表示相对于根元素（<html> 标签）字体大小的单位。

Tailwind CSS默认的根字体大小是 16px，而 1rem 则等于 16px。因此，w-1 表示元素的宽度为 0.25rem。
计算方法是：0.25rem=0.25×16px=4px

所以，w-20 就是将元素的宽度设置为 80px/5rem。你可以通过Customizing Spacing修改默认设置。

如果你需要设置成百分比/固定px 将className改写成w-[xx]即可:
width: 20px -> w-[20px]
width: 20% -> w-[20%]

咱们将这段代码分步解释下是怎么实现响应式页面：

当前元素默认以20份间距的宽度来展示
当屏幕宽度大于md(@media (min-width: 768px))时将元素设置为40份间距的宽度
当屏幕宽度大于lg(@media (min-width: 1024px))时将元素设置为60份间距的宽度

字号大小也是如此这样就轻松实现了响应式️✌️

主题色配置 📝

主题色的配置也非常的简单在tailwind.config.ts中对着文档中Theme配置修改你所需要的字段即可

// tailwind.config.ts
import type { Config } from 'tailwindcss'
 
const config: Config = {
  ...,
  theme: {
    extends: {
      colors: {
        'main': '#1fb6ff',
        'importantBase': '#ff49db',
        'lightBase': '#ff7849',
        'darkBase': '#13ce66',
      },
    }
  },
}
export default config

此时我们就拥有了上述colors字段中的变量在Component中使用它们修改字体颜色

// page.tsx
<h1 className='text-lightBase bg-darkBase'>Hello World</h1>

开发体验总结 ⚔️

那么他是不是没有缺点呢答案是否定的我从个人的使用情况来总结大概有以下几方面的感受

优点

定制化: 在tailwind.config.ts中提供了特别多定制化的选项非常适合有动手能力的人去做定制化/拓展不用再像传统的CSS一样局限于某一种设计模式
高效开发:
- 使用了一段时间Tailwind CSS我反而觉得在编写样式的时候能更直接的写出想要的样式并且类名所表达的意思对比一连串的传统 CSS 或者 CSS in JS 的方案来说更直观更舒服
- 针对响应式页面你可以不用手写大量的自定义CSS媒体查询对比老伙计Bootstrap也更加的简便一些不需要再修改原本框架中耦合的组件样式
无需预处理器: Tailwind CSS不依赖于预处理器比如Sass或Less不需要配置额外的Parser、Loader
- 基于Element UI的一些开源项目大部分选用的是Sass 编译的依赖又以node-sass为主而并没有迁移到dart-sass 不同的node-sass版本又需要不同的Node版本安装依赖十装九报错 ~~damn!~~
样式作用域: 在之前我们总会担心元素类名很容易出现命名的重复导致内部/外部模块出现意外的样式通常我们需要使用额外的方式来规避比如：
- Sass Nesting
- BEM命名规范
但Tailwind CSS让我们做到元素即作用域比起上述方法更轻松规避这样的问题因为我们根本没有自定义的className ^^

缺点

学习曲线 (#优点1) : 对于那些习惯传统CSS框架开发在Sass/Less中没有抽象习惯的小伙伴 Tailwind CSS的原子类方式可能需要一些时间适应这种方式需要了解和记忆一系列类名
可读性 (#优点2) :
- 本文中所举的是相对简单例子但是实际开发中每个元素大概率都会包含大量的类名从而导致每个元素的代码看起来非常长长长长长长长长有种用样式表深度换长度的感觉 (?
- 熟悉以后写页面是真的爽但是对于接手代码迭代的新伙伴来说一旦需要排查检索其中的样式反而会增加可读性上的负担比如下面随便从当前博客摘抄的一段样式蛤蛤⬇️
```
<div className="px-5 md:px-10 bg-dark/90 dark:border-light dark:border-solid border-2 text-light py-2 flex items-center justify-around flex-wrap text-lg sm:text-xl font-medium mx-5 md:mx-10 rounded-lg">...</div>
```
样式表大小: 尽管Tailwind CSS提供了一种按需生成样式表的方式但在某些情况下由于原子类的数量较大最终生成的样式表可能会相对较大这可能会影响页面加载性能（不过这一部分的性能是可接受的
命名空间约束 (#优点4) ：原子类的方式小概率会导致全局命名冲突因为所有类名都在同一个命名空间中很难说在一个项目持续迭代的过程中是否会出现冲突情况orz

辩证地说了那么多Tailwind的优缺点但是不影响我认为Tailwind CSS是一个优秀的CSS框架在它的身上相信你会get到对于你来说利大于弊的那一点然后坚定地去选择它 🤗

啊其实想讲一下他的Dark Mode配置的但是涉及到一些JS逻辑层的代码就不写在这篇文章中了挖个坑后面来填