第26章—快速掌握Tailwind：最流行的原子化CSS框架

2876字约10分钟

2024-09-19

Tailwind 是流行的原子化 css 框架。

有多流行呢？

它现在有 76k star 了，npm 包的周下载量也很高：

那什么是原子化 css？

我们平时写 css 是这样的：

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

.aaa {
    font-size: 16px;
    border: 1px solid #000;
    padding: 4px;
}

在 html 里指定 class，然后在 css 里定义这个 class 的样式。

也就是 class 里包含多个样式：

而原子化 css 是这样的写法：

<div class="text-base p-1 border border-black border-solid"></div>

.text-base {
    font-size: 16px;
}
.p-1 {
    padding: 4px;
}
.border {
    border-width: 1px;
}
.border-black {
    border-color: black;
}
.border-solid {
    border-style: solid;
}

定义一些细粒度的 class，叫做原子 class，然后在 html 里直接引入这些原子化的 class。

这个原子化 css 的概念还是很好理解的，但它到底有啥好处呢? 它解决了什么问题？

口说无凭，我们试下 tailwind 就知道了，它就是一个提供了很多原子 class 的 css 框架。

我们通过 crerate-react-app 创建一个 react 项目：

npx create-react-app tailwind-test

然后进入 tailwind-test 目录，执行

npm install -D tailwindcss

npx tailwindcss init

安装 tailwindcss 依赖，创建 tailwindcss 配置文件。

tailwind 实际上是一个 postcss 插件，因为 cra 内部已经做了 postcss 集成 tailwind 插件的配置，这一步就不用做了：

然后在入口 css 里加上这三行代码：

这三行分别是引入 tailwind 的基础样式、组件样式、工具样式的。

之后就可以在组件里用 tailwind 提供的 class 了：

import './App.css';

function App() {
  return (
    <div className='text-base p-1 border border-black border-solid'>guang</div>
  );
}

export default App;

我们执行把开发服务跑起来:

npm run start

可以看到，它正确的加上了样式：

用到的这些原子 class 就是 tailwind 提供的：

这里的 p-1 是 padding:0.25rem，你也可以在配置文件里修改它的值：

在 tailwind.config.js 的 theme.extend 修改 p-1 的值，设置为 30px。

刷新页面，就可以看到 p-1 的样式变了：

.text-base 是 font-size、line-height 两个样式，这种通过数组配置：

也就是说所有 tailwind 提供的所有内置原子 class 都可以配置。

但这些都是全局的更改，有的时候你想临时设置一些值，可以用 [] 语法。

比如 text-[14px]，它就会生成 font-size:14px 的样式：

比如 aspect-[4/3]，就是这样的样式：

我们平时经常指定 hover 时的样式，在 tailwind 里怎么指定呢？

很简单，这样写：

生成的就是带状态的 class：

此外，写响应式的页面的时候，我们要指定什么宽度的时候用什么样式，这个用 tailwind 怎么写呢？

也是一样的写法：

生成的是这样的代码：

这个断点位置自然也是可以配置的：

可以看到 md 断点对应的宽度变了：

光这些就很方便了。

之前要这么写：

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

.aaa {
    background: red;
    font-size: 16px;
}

.aaa:hover {
    font-size: 30px;
}

@media(min-width:768px) {
    .aaa {
        background: blue;
    }
}

现在只需要这样：

<div class="text-[14px] bg-red-500 hover:text-[30px] md:bg-blue-500"></div>

省去了很多样板代码，还省掉了 class 的命名。

并且这些 class 都可以通过配置来统一修改。

感受到原子化 css 的好处了么？

tailwind 文档提到了 3 个好处：

不用起 class 名字，这点简直太爽了，我就经常被起 class 名字折磨。

css 不会一直增长，因为如果你用之前的写法可能是这样的：

多个 class 里都包含了类似的样式，但你需要写多次，而如果用了原子 class，就只需要定义一次就好了。

css 没有模块作用域，所以可能你在这里加了一个样式，结果别的地方样式错乱了。

而用原子 class 就没这种问题，因为样式是只是作用在某个 html 标签的。

我觉得光这三点好处就能够说服我用它了，特别是不用起 class 名字这点。

当然，社区也有一些反对的声音，我们来看看他们是怎么说的：

一堆 class，可读性、可维护性太差了

真的么？

这种把 css 写在 html 里的方式应该是更高效才对。

想想为啥 vue 要创造个单文件组件的语法，把 js、css、template 放在一个文件里写，不就是为了紧凑么？

之前你要在 css、js 文件里反复跳来跳去的，查找某个 class 的样式是啥，现在不用这么跳了，直接在 html 里写原子样式，它不香么？

而且 tailwindcss 就前面提到的那么几个语法，没啥学习成本，很容易看懂才对。

但是还要每次去查文档哪些 class 对应什么样式呀

这个可以用 tailwind css 提供的 vscode 插件来解决：

安装这个 Tailwind CSS IntelliSense 之后的体验是这样的：

有智能提示，可以查看它对应的样式。

不需要记。

这个插件触发提示需要先敲一个空格，这点要注意下：

难以调试

在 chrome devtools 里可以直接看到有啥样式，而且样式之间基本没有交叉，很容易调试：

相反，我倒是觉得之前那种写法容易多个 class 的样式相互覆盖，还要确定优先级和顺序，那个更难调试才对：

类型太长了而且重复多次

这种问题可以用 @layer @apply 指令来扩展：

前面讲过 @tailwind 是引入不同的样式的，而 @layer 就是在某一层样式做修改和扩充，里面可以用 @apply 应用其他样式。

效果是这样的：

内置 class 不能满足我的需求

其实上面那个 @layer 和 @apply 就能扩展内置原子 class。

但如果你想跨项目复用，那可以开发个 tailwind 插件

const plugin = require('tailwindcss/plugin');

module.exports = plugin(function({ addUtilities }) {
    addUtilities({
        '.guang': {
            background: 'blue',
            color: 'yellow'
        },
        '.guangguang': {
            'font-size': '70px'
        }
    })
})