Tailwind 是一个实用程序优先的 CSS 框架，提供了一整套预先设计的样式和组件，使您可以轻松创建令人惊叹的 UI，而无需自定义 CSS。

然而，即使拥有 Tailwind 大量的预先设计的样式，从头开始构建网站或应用程序仍然是一项艰巨的任务。这就是 Tailwind 组件库派上用场的地方。在本文中，我们将探索 2023 年 28 个最佳免费 Tailwind CSS 组件库，每个库都提供一组独特的组件，帮助您更快、更高效地构建下一个项目。无论您是经验丰富的 Web 开发人员还是刚刚入门，这些组件库都将使您的工作流程更加顺畅和愉快。

1. 前言

Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架，提供了基础的工具类 utility classes（如：内边距 padding、字体 text 和 font、动画 transition 等预设类），能直接在脚本标记语言中组合起来，构建出您想要的设计。

Tailwind CSS 优点

• 可定制化程度极高
• 减少为 class 取名字的苦恼。
• 响应式设计
  Tailwind CSS 遵循移动优先的设计模式，断点系统很灵活。比如实现一个媒体查询，要求根据不同的屏幕宽度实现不同的图片宽度。传统写法如下
• CSS 体积大幅降低

1. 前言

根据flex-layout官方宣告, @angular/flex-layout当前(2023-06-25)处于deprecated状态. 替代方案为Tailwind或者Angular CDK.

具体原因参考官方的anoucement - Medium post
和github上的讨论

建议新项目使用其他css library, 旧项目考虑移植到其他css library.

以下是我从flex-layout的一些实践.

1. 前言

• block 和 inline 这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block 元素通常被现实为独立的一块，会单独换一行；inline 元素则前后不会产生换行，一系列 inline 元素都在一行内显示，直到该行排满。
• 大体来说 HTML 元素各有其自身的布局级别（block 元素还是 inline 元素）：
  • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
  • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
• block 元素可以包含 block 元素和 inline 元素；但 inline 元素只能包含 inline 元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含 inline 元素，而不能包含 block 元素。
• 一般来说，可以通过 display:inline 和 display:block 的设置，改变元素的布局级别。

1. sass 安装

1

cnpm install -g sass

检查是否安装成功

1
2

$ sass --version
1.42.1 compiled with dart2js 2.14.2