tailwindss 类似更加底层的抽象,他会扫描所有 HTML 文件、JavaScript 组件和任何其他模板的类名,根据他定义的规则来生成相应的样式,他仅生成在项目中实际使用的CSS ,这样我们可以得到尽可能小的 CSS 文件。 tailwindcss 的css 样式规则也非常好记,有点类似key-value的感觉,如 如果自己要的值没有可以用中括号代替 ...
blockdisplay: block; inline-blockdisplay: inline-block; inlinedisplay: inline; flexdisplay: flex; inline-flexdisplay: inline-flex; tabledisplay: table; inline-tabledisplay: inline-table; table-captiondisplay: table-caption; table-celldisplay: table-cell; ...
.blockdisplay: block; .inline-blockdisplay: inline-block; .inlinedisplay: inline; .flexdisplay: flex; .inline-flexdisplay: inline-flex; .tabledisplay: table; .table-captiondisplay: table-caption; .table-celldisplay: table-cell; .table-columndisplay: table-column; ...
Tailwind CSS 挑战了这一概念,认为实用优先的 CSS 提供了更清洁、更易于维护的解决方案。 2.1 可控制的CSS体积 得益于Tailwind CSS 原子类和工具类的模式,样式的编写变成原子CSS的组合。随着功能的迭代、组件的增加,使用到的新的原子/工具类逐渐减少,因此编译出的CSS的增量趋近于零。CSS的体积并不会随着功能迭代、...
D Preview A B C D Responsive Tailwind Display Tailwind CSS allows you to apply display classes responsively at different breakpoints. To use responsive tailwind display classes, you can append the breakpoint prefix to the utility class. For example,md:display-inlinesets the display behavior to...
tailwindcss 系列 Display Display 包含三种情况block inline-block inline 效果如下图 代码实现 block 1 2 3 inline-block 1
<!-- ... -->// 生成的css:nth-of-type(3) .group.group-\[\:nth-of-type\(3\)_\&\]\:block {display: block; } When you need to style an element based on the state of a sibling element, mark the sibling with the peer class, and use peer-* modifiers like peer-invalid to ...
tailwindcss 的命名规范很统一,具有唯一性的样式属性会直接作为对应的类名,例如block, absolute, flex, top-0, overflow-hidden, whitespace-nowrap, border, border-black只看名称就能唯一确定属性,符合开发直觉。 block->display: block absolute->position: absolute ...
hidden: 隐藏元素,相当于display: none; block: 设置元素为块级元素,相当于display: block; inline: 设置元素为行内元素,相当于display: inline; flex: 设置元素为弹性盒,相当于display: flex; inline-flex: 设置元素为内联弹性盒,相当于display: inline-flex; ...