拥抱 tailwindcss

拥抱 tailwindcss

写于 2021 年 3 月 22 日：

什么是 tailwindcss

简单来说，它是一系列预制的 CSS 类．并且，对于没有预先提供的，也支持一定程度的自定义．

例如 mx-auto 这个类，实际上相当于：

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

而 max-w-3xl 这个类，就相当于：

.max-w-3xl {
    max-width: 48rem;
}

对于一个标签，例如：

<div className="max-w-3xl mx-auto" ></div>

我们仅需写其中的 max-w-3xl 和 mx-auto，就能得到期待中的效果，而无需手动去把

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-w-3xl {
    max-width: 48rem;
}

完整地写出来．

对于这种预制的 CSS 类，在 tailwindcss 的官网上还列出有许多．

对于一些简单的情形，我们可以不用写一行 CSS 代码，仅仅在 className 字段中写 tailwindcss 类名，就能实现想要的效果．

图中显示的：flex, bg-gray-100, rounded-xl 都是原先 CSS 代码的浓缩，一个这样的 tailwindcss 类一般对应原来的一行或者多行原生 CSS.

实际上，你也可以认为是：tailwindcss 将原生 CSS 中最常被用到的那部分，以及相对较正交的那部分单独拿出来，组成一个个类供设计者直接调用．

我怎么能记做这么多类名

要开始使用 tailwindcss, 实际上我们仅仅需要记做每一类类大致的名称，例如：text-* 是用来调整字体的大小和颜色的，或者更应该认为 text-* 包含了常用的字体风格组合：

而 h-* 用来选择高度设置组合，w-* 用来选择宽度设置组合，m-*, mb-*, mt-* 分别用来选择 margin 效果，margin-bottom 效果和 margin-top 效果，这些都很好记住．

又如上图所示，VS Code 上的 Tailwind CSS IntelliSense 插件能很好地实现 tailwindcss 类名的拼写的自动提示功能．

本站应用 tailwindcss 的程度

探索子博客网站的首页：

通过应用 tailwindcss 已经获得了更好的 Responsive 效果，如今在 iPhone 屏幕上显示效果变得比以前更好了．

评论区页面也是依靠 tailwindcss 才快速地做出来：

并且在移动设备上也有较为自然的显示效果．

当然还有你现在看到的这个页面，它也是响应式的．

响应式其实现在已经不算新鲜了，我想说的只是 tailwindcss 让响应式开发变得简单．

应用 tailwindcss 的一些好处

首先，自己其实完全可以不写一行 CSS 代码，而仅仅是拿 tailwindcss 预制的那些个 CSS 类来灵活组合，这样已经可以实现大多数常见的效果．省去了以往写原生 CSS 或者 SCSS 时需要为每一个类单独起名的烦恼，从而大大加快了开发速度．

其次，tailwindcss 是天然地响应式友好的，对于响应式开发，我们不再需要去写 @media Media 查询语句．tailwindcss 提供了常见的断点，例如：sm: 对应

@media (min-width: 640px)

而 md: 对应：

@media (min-width: 768px)

更大的还有 2xl: 对应：

@media (min-width: 1536px)

className="md:w-32 lg:w-48"

的时候，就表示

@media (min-width: 768px) {
    width: 8rem;
}

@media (min-width: 1024px) {
    width: 12rem;
}

所以说响应式的 style 用 tailwindcss 写起来那是相当的优雅、方便和简洁．

我个人觉得，tailwindcss 相当于传统 CSS, 就好比 TypeScript 相当于 JavaScript, 是一种跨域，也是一种正规化，规范化．

具体的做法

您现在所看到的这个页面它是由代码生成，代码位于仓库 markdown-blog, 具体来说，这个项目是基于 Next.js, unified, remark-react, gray-matter 的．

简单来说，Next.js 负责 routing, data-fetching 和维护一个项目构建时所需的运行环境．

gray-matter 负责将包含了 Front-Matter 的 Markdown 文本内容的 Front-Matter 和 Markdown 正文区分开来，并且将 Front-Matter 内容解析成 JavaScript 的 Object.

unified 提供了一个统一的结构式文本 (structured text) 解析 (parsing) 的框架，remark-react 作为这个框架上的一个插件 (plugin), 功能是将 Markdown 文本解析成 React.ReactElement，这和直接操作 innerHTML (往往是使用 dangerouslySetInnerHTML 方法) 有着本质上的不同．

有什么不同呢？

从 remarkjs 的角度看，一份 Markdown 文本可以被解析成一个结构分明的抽象语法树 (AST):

建出了这个树，相当于程序「理解」了 Markdown 文本的「结构」，而非仅仅是机械式地将一种文本 (Markdown) 转换为另外一种文本 (HTML)．

从而，我们可以灵活地决定，当 AST 要被转换称为 ReactElement 时，具体的转换规则，例如，我们可以将 <h1> 替换为我们自己实现的一个

class Heading1 extends React.Component { ... }

如上图所示，我们最终可以从 Markdown 中解析出一系列的 ReactElement 对象，并且自己来实现这些 ReactElement 对象的类．

比如说，Heading1 的实现：

我们就是通过这种方式，将 tailwindcss 应用在产生自 Markdown 的网页中的．