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