Tailwindcss 是一个功能类优先的 CSS 框架，通过 flex, pt-4, text-center 和 rotate-90 这种原子类组合快速构建网站，而不需要离开你的 HTML。就是记住原子类，不要再自己想 CSS 命名一股脑子写 HTMl 就行了！
它与常规的 Bootstrap、Bulma 和 Material UI 不同之处在于没有提供预设的组件，比如：按钮、菜单和面包屑等。在 Bootstrap 中创建一个按钮：
得到如下：
而 Tailwindcss 没有固定的预设样式，所以需要自己组合：
结果：
一个方法、一个库、一个框架或者说一个新的东西的出现肯定是为了解决一个问题，不然它的出现可能毫无意思。就算是手工耿做的一些无厘头的东西，实际看着还有点用呢（最近他给僵尸做了一辆自行车）：
那 Tailwindcss 解决了什么问题？可以从作者的意图看出：
他认为语义化的 CSS 并不是很好维护。
其实想想自己项目初始的时候自己起的很有语义化的名字，随着业务的变化和不同人员的更改那个起初很有意义的名字已经 名不符实 。
还有我们在使用 Bootstrap 预设类的 UI 框架时遇到设计风格和公司内部不同时，重置样式也会带来头疼的问题。
我们这里使用的是 V3 版本的 CDN（不推荐），若想配合构建工具看看官网如何使用的。V2 的 CDN 是引入一个 CSS 文件，而 V3 引入的是一个 script 。
结果：
https://tailwindcss.com/docs/hover-focus-and-other-states
结果：
看下 hover 是如何实现的：
我们之前给某个样式添加 hover 如何做？
在 Tailwindcss 中不是给现有的 class 添加一个 hover 状态，而是新增一个特定功能的 class :
这样有类似 hover 样式的就可以复用了。
学习 Tailwindcss 的期初负担在于记忆类名，还好都是有规律可循的：
最基础的还是需要了解下，比如什么是盒子模式，这个可以说是DIV排版的核心所在。再就是CSS几个常用的属性，例如：float、padding、margin、overflow、display、position、z-index、clear。其它一些如果你常写表格基本相同的。
下面给你一个盒子模式图，你仔细看下
通过这个图大致的可以看出来一个DIV构架由哪些组成。
这里重点属性是overflow和margin这个属性，IE和FF的兼容性总是很变态，所以这个涉及如何解决兼容了。
你可以选择一个页面，用纯DIV+CSS进行构架。在不同的浏览器中进行调试，这个过程下来代码兼容性也提高了，好多属性也就明白了。
1、最好的教程抹过于CSS视频教程了这里我们准备了两套给您 ，都是市面上比较流行的
（1）网站制作教程推出css快速入门视频教程
（2）网页制作教程-CSS初级入门视频教程
2、本站最详细最好的图文教程
在学习CSS中遇到不懂得标记，可以查找CSS手册
有了好的视频和工具，那么还需要一两本系统的教材，这样才能够系统的学习CSS。这里推荐两本给大家看看。
