如果你不了解什么是 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 之后，打开浏览器看到：
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex , pt-4 , text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计
[图片上传失败...(image-475de9-1636387074601)]
个人总结 tailwind css 功能主要包括三部分：
tailwind css 提供了一套以移动优先的，响应式样式类, 类似原bootstrap 可直接使用
[图片上传失败...(image-87b874-1636387074601)]
tailwind css 为处理响应式，伪类， 伪元素提供类型作用范围限定类
样式扩展，使我们能组合现有基础类或定义自己的样式类.
通过 taildwind.config.js 配置文件，能实现更多自定义功能
配置主要分为：
tailwind css 提供的预设类很多，一般根据官方文档，按照功能查询所需的类名。
总结几条规则：
个人觉得 tailwind css 的主要优势在于提供了一套自定义样式模板的工具，并有一个完整的可扩展的基础示例 预设样式 。
非常适合有UI设计体系或要求统一UI视觉的产品, 通过组合基础样式模板，统一样式规范，提高编写效率。
如果UI本身就没有统一规范的化，还是内联样式文件来的灵活些。
这一套有点像组件库为了可配置主题而抽离出来的组件样式变量。
官方文档
一般能不用hack的情况下都不用的。important这样的都不用。因为那样怎么说，不属于正常的代码。
dede phpwind之所以不用hack是因为他们css代码写得好。同样的效果，可能好一些的就不需要hack一样能达到效果。。。
目前来说，真正需要hack的情况，最通常的网站里，不超过五种情况。如果你的css里hack特别多，可能你写法有点问题了。
--------------------
w3c网站里写得很清楚啊...css有标准的...比如1.0 2.0等等.但各浏览器对各版本CSS支持也不相同..1.0是最基本的,都支持.只是有个别情况下又有一点点区别.
