使用Tailwind CSS必须知道的26个组件库

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

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

阅读更多

tailwindcss教程

1. 前言

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

Tailwind CSS 优点

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

从@Angular/Flex-Layout迁移到Tailwindcss

1. 前言

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

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

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

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

阅读更多