Tailwind CSS 学习笔记(一)

时间:2025-03-19 21:05:19

一、简介

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、 activedisabled、 focus-withinfocus-visible 以及 我们自己所创造的一些奇妙的状态,例如 group-hover

<