Tailwind CSS 学习笔记(一)

一、简介

Tailwind CSS是一个工具优先的CSS 框架，只需书写HTML 代码，无需书写CSS，即可快速构建美观的网站。

二、优点

1、简洁、规整，避免了随意取类名

        Tailwind CSS 的工具类(Utility classes) 能够为你提供一套约束系统，避免让你的样式表中出现随意的取值。它让颜色、间距、排版、阴影以及一切取值保持一致，并最终形成一个精心构建的设计系统

2、灵活性强、你所想地就能实现

        由于Tailwind 抽象层级较低，因此它从不鼓励将同一个设计应用到两个网站上。即使使用相同的调色板(color palette) 和尺寸设置，也能很容易地让同样地组件，具有完全不同地外观。

3、体积小，绝不包含任何用不到地css 代码

        Tailwind 会在针对生产环境进行构建时自动删除所有未使用到地CSS 代码，也就是说你所获得地最终地 CSS 代码包地尺寸是最小地。事实上，大部分Tailwind 项目所生成地CSS 代码包都小于 10kB。

4、响应式设计贯穿整个框架

        在任何工具类前面添加一个代表屏幕尺寸地前缀，然后就能看到它神奇地作用到某个特定地断点(breakpoint) 上了。

5、支持鼠标悬停和焦点状态

        将 hover: 前缀添加到 你所要使用的 CSS 类的名称前面即可。支持 focus、 active、disabled、 focus-within、focus-visible 以及 我们自己所创造的一些奇妙的状态，例如 group-hover

<