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

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

然而,即使拥有 Tailwind 大量的预先设计的样式,从头开始构建网站或应用程序仍然是一项艰巨的任务。这就是 Tailwind 组件库派上用场的地方。在本文中,我们将探索 2023 年 28 个最佳免费 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的一些实践.

阅读更多

block、inline 和 inline-block三者之间的区别

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 的设置,改变元素的布局级别。
阅读更多

sass学习笔记

1. sass 安装

1
cnpm install -g sass

检查是否安装成功

1
2
$ sass --version
1.42.1 compiled with dart2js 2.14.2
阅读更多