Hello TailwindCSS/WindiCSS

Posted 2023-03-21

参考技术A 随着项目越来越大，你是不是觉得项目的 CSS 越来越难维护，常用的属性就是那么几个，来来回回的写，搞得你也很烦，如果是那么赶紧尝试用 ACSS 方案来解决你的问题吧，如果否，那说明你经历的项目还不够多不够大，这时候你要继续努力搬砖。

如果你不了解什么是 ACSS 的话，可以参考下我之前的教程: CSS 架构之 ACSS 。如果你想了解项目组织样式的演进历史，强烈建议你研读 TailwindCSS 作者 2017 年写的把 CSS 分为五个阶段的一篇文章：

读完你会彻底理解「为什么传统的 “语义化类名” 是 CSS 难以维护的原因」，详述了 CSS 的五个阶段，写的很棒，多看几遍。

回到 ACSS，ACSS 中目前最流行的框架就是我们文章的主角 TailwindCSS 。

但是，如果在项目中使用建议你使用 Windi CSS 。

它们是一种继承关系，如何 TailwindCSS 是父类，那么 Windi CSS 就是子类。

当然你也可以认为 TailwindCSS 是 ES5， Windi CSS 是 javascript ， Windi CSS 在 TailwindCSS 的基础上进行了扩展，还包括 ES6+ 的部分，这个我们留在 TailwindCSS 章节讲。

不过，你可以放心学习 TailwindCSS，它的语法在 Windi CSS，完全是可用的。

Windi CSS 如何安装结合其他框架使用，在 安装 章节非常清楚。

而且我们也没必要纠结 WIndiCSS 的大家过程，这些框架都会帮我们处理的，这里我们简单的搭建一个项目，方便接下里的演示：

在 package.json 文件中的 script 字段，我们新增如下字段：

接下来可以运行命令：

项目根目录将会新增三个文件：

查看 index.html 的文件内容大致如下：

HTML 层面全部都是 ACSS 的写法，同时注意文件开头应用的样式：

我们对其重新命名： windi.css => windi-acss.css 。

现在我们运行命令：

这个命令会根据 HTML 的类名生成对应的 CSS，这是项目的目录结构为：

多了个文件 windi-acss.css 其内容为：

现在可以在浏览器打开 index.html 文件了，看到效果是下面这样：

为了更好的演示和提升开发体验，我们需要对项目进行一些调整。

首先，就是增加热更新：

windicss:watch 命令添加了 -d 参数，开启开发环境下的热更新功能。

目录调整为如下结构：

index.html 的内容替换为：

npm run windicss:watch 之后，打开浏览器看到：