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 的期初负担在于记忆类名，还好都是有规律可循的：
CSS 的出现， 实现了网页的结构和样式分离。美容师！
CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明
CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明
以内嵌式样式表为例
vs code快捷键： ctrl+/
CSS的英文可以大写，也可以小写
建议全部小写！
颜色名就是使用颜色的英文单词进行表示
更多的颜色名可以通过查询手册得到
颜色值指使用具体颜色的数值表示。 包括： rgb 模式和十六进制模式写法
常用颜色的 rgb 色值：
常用颜色的十六进制色值：
注： 十六进制颜色值简写模式： 如果红、 绿、 蓝三个原色的色值每一个都是由重叠的数字组成， 可以将重叠的数字简化成一个进行书写。 如： 红色 #f00
如果不设置字体属性， 不同的浏览器有自己的默认字体
首选字体需要根据设计图确定， 最后需要设置备用字体
缺点： id 选择器只能实现单选， 不能帮我们完成多选的功能
原子类： 在css中提前设置一些类名， 每个类选择器后面只添加一条css样式属性， 这些属性会在页面中常被使用， 后期可以不需要多次书写属性， 只要将对应的类名添加给需要的标签即可
实际工作中， 通常我们有一个使用规律： 类上样式(CSS)， id 上行为(JavaScript)
优点： 减少 class 属性的使用， 选择效率更高
继承性是一个很好的性质， 可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 <body>， 后期所有的后代标签都可以从 <body>进行继承
普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。
CSS 预处理器概述：CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
总结来讲就是用编程的方法来写CSS样式，而不是手工一行行码，相当于从手工业时代进化到工业时代。
三种CSS 预处理器（框架）简介：
A、SASS2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
B、LESS2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
C、Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。
Stylus主要优点：
1. 简短直观，缩进让CSS的层次非常直观。
2. At 属性引用可以减少维护量。
3. 函数和Mixin，重用的利器。
CSS 预处理器优缺点：
A、可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。
B、部分PostCSS插件配合预处理器将功能添加到你的工作流中，让你工作变得更加轻松。如果只使用一个预处理器，而不使用这些插件，工作流至少会变得更加困难。
C、PostCSS插件和喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。
D、在常规的预处理器通过使用混合宏或函数特性像程序一样处理代码，达到类似的结果。不过不同的是CSS代码，而其他一切通过插件去处理，而这个过程中不需要调用函数，也没有混合宏等等。
使用技巧：Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。
