如果你不了解什么是 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 之后，打开浏览器看到：
类可以用在任何html元素上面，它的格式是：.类名{
属性名:属性值；
}
比如，定义一个使设置字体大小为12像素，颜色为红色的类red_font:
.red_font{
font-size:12px
color:red
}
在html中，你就可以在你想要任何元素上加上这个类，如
<
div
class="red_font">some
text
