level 2
喜欢可爱的你07
楼主
Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架,提供了基础的工具类 utility classes(如:内边距 padding、字体 text 和 font、动画 transition 等预设类),能直接在脚本标记语言中组合起来,构建出您想要的设计。
目前主流的 UI 框架,如 Ant-design,则采用直接提供现成组件(如:按钮 buttin、表单 form 等组件)的方式。开发者可以使用框架提供的组件快速进行页面构建,但由于组件的样式一般是提前预设并且封装好的,若要定制样式,需要大量覆盖组件的内置样式。
Tailwind 没有提供现成的组件,而是提供各种通用的样式类。开发者可以直接在 HTML 的 Tag 添加各种基础的 class 为元素设置相应的 UI 样式,通过各种基础的 class 的「叠加组合」构建出所需的外观,高效地进行定制化的网站开发。换言之,在 TailwindCSS 中,有许多小类代表 CSS 声明。当创建组件时,只需要引用其中的一些小类就可以创建你需要的组件。
Tailwind CSS 优点
可定制化程度极高:Tailwind 带有一个默认配置,你可以使用项目中的 “tailwind.config.js” 来覆盖默认配置。从颜色、间距大小到字体的所有内容都可以使用配置文件轻松定制。且配置文件的每个部分都是可选的,您只需指定要更改的内容,缺失的部分将使用 Tailwind 的默认配置。

减少为 class 取名字的苦恼。
无需切换上下文:Tailwind 提供了几乎所有需要的开箱即用,开发者不再需要数百次从 HTML 切换到 CSS 。
响应式设计:Tailwind CSS 遵循移动优先的设计模式,断点系统很灵活。比如实现一个媒体查询,要求根据不同的屏幕宽度实现不同的图片宽度。

怎么说呢,这玩意儿确实好用。
2022年04月07日 11点04分
1
目前主流的 UI 框架,如 Ant-design,则采用直接提供现成组件(如:按钮 buttin、表单 form 等组件)的方式。开发者可以使用框架提供的组件快速进行页面构建,但由于组件的样式一般是提前预设并且封装好的,若要定制样式,需要大量覆盖组件的内置样式。
Tailwind 没有提供现成的组件,而是提供各种通用的样式类。开发者可以直接在 HTML 的 Tag 添加各种基础的 class 为元素设置相应的 UI 样式,通过各种基础的 class 的「叠加组合」构建出所需的外观,高效地进行定制化的网站开发。换言之,在 TailwindCSS 中,有许多小类代表 CSS 声明。当创建组件时,只需要引用其中的一些小类就可以创建你需要的组件。
Tailwind CSS 优点
可定制化程度极高:Tailwind 带有一个默认配置,你可以使用项目中的 “tailwind.config.js” 来覆盖默认配置。从颜色、间距大小到字体的所有内容都可以使用配置文件轻松定制。且配置文件的每个部分都是可选的,您只需指定要更改的内容,缺失的部分将使用 Tailwind 的默认配置。

减少为 class 取名字的苦恼。无需切换上下文:Tailwind 提供了几乎所有需要的开箱即用,开发者不再需要数百次从 HTML 切换到 CSS 。
响应式设计:Tailwind CSS 遵循移动优先的设计模式,断点系统很灵活。比如实现一个媒体查询,要求根据不同的屏幕宽度实现不同的图片宽度。

怎么说呢,这玩意儿确实好用。