后端开发教程 - Java、Spring Boot 实战 - msg200.com
TailwindCSS 项目的专业技巧
1. 长宽比
2. 插入定位
分割列表样式
结论
奖金
最近，TailwindCSS 发布了 3.0 版本，该框架依然广受欢迎。你知道有哪些小技巧可以让代码更简洁吗？
1. 长宽比
简洁的 UI 要求所有卡片和图片在所有设备上都保持完美尺寸。屏幕尺寸种类繁多，无法使用诸如em、rem、%之类的响应式缩放单位，否则vh/vw会导致媒体在某些平台上变形。
强制媒体尺寸对于像素来说并非易事，但如何强制响应式比例呢？也许，一个个人资料横幅是 1500x500 像素，但用户上传的内容使得保持用户体验变得很困难。答案是使用宽高比容器。
演示：https://play.tailwindcss.com/GOv5fZhyL3
<iframe class="w-full aspect-video ..."
src="https://www.youtube.com/ ...">
</iframe>
纵横比会强制内容扩展到容器的宽度，同时自动缩放高度以匹配 的比例16:9。宽度为 的节点1920高度为 ，1080而在移动设备上，它将缩放到320x180。
您还可以自定义配置文件以获得更多比例：
module.exports = {
theme: {
extend: {
aspectRatio: {
'4/3': '4 / 3',
'banner': '1500/500'
},
},
},
plugins: [],
}
2. 插入定位
目前，只有约 79% 的浏览器支持 CSS 的宽高比属性。幸运的是，Tailwind 有一个针对宽高比的插件，它使用了 padding-bottom 技巧。这时，插图就派上用场了。
插入技术与宽高比容器完美兼容，因为它是绝对定位的简写。例如，一个完美的方形元素需要嵌套滚动内容。最快的解决方案是对具有完整宽度和完整高度的子元素使用绝对定位。以前，这需要几个类名才能正确定位子元素。
然而，Tailwind 的开发者们知道这种技术很常见。现在一个工具类就能处理所有的定位。Insets 会填充或部分填充整个父节点。
演示：https://play.tai lwindcss.com/4ZTlx80ryN
<!-- Pin to top left corner -->
<div class="relative aspect-square ...">
<div class="absolute left-0 top-0 h-1/2 w-1/2 ...">01</div>
</div>
<!-- Span top edge -->
<div class="relative aspect-square ...">
<div class="absolute inset-x-0 top-0 h-1/2 ...">02</div>
</div>
<!-- Pin to top right corner -->
<div class="relative aspect-square ...">
<div class="absolute top-0 right-0 h-1/2 w-1/2 ...">03</div>
</div>
<!-- Span left edge -->
<div class="relative aspect-square ...">
<div class="absolute inset-y-0 left-0 w-1/2 ...">04</div>
</div>
<!-- Fill entire parent -->
<div class="relative aspect-square ...">
<div class="absolute inset-0 ...">05</div>
</div>
<!-- Span right edge -->
<div class="relative aspect-square ...">
<div class="absolute inset-y-0 right-0 w-1/2 ...">06</div>
</div>
<!-- Pin to bottom left corner -->
<div class="relative aspect-square ...">
<div class="absolute bottom-0 left-0 h-1/2 w-1/2 ...">07</div>
</div>
<!-- Span bottom edge -->
<div class="relative aspect-square ...">
<div class="absolute inset-x-0 bottom-0 h-1/2 ...">08</div>
</div>
<!-- Pin to bottom right corner -->
<div class="relative aspect-square ...">
<div class="absolute bottom-0 right-0 h-1/2 w-1/2 ...">09</div>
</div>
分割列表样式
Tailwind 并非完美无缺，通常需要自定义 CSS 才能匹配 Bootstrap 等其他流行框架的列表样式。其标志性的设计是在每个列表项之间添加边框。
这种样式更受欢迎，因为它可以清晰地区分列表项，而无需使用表格、弹性框或网格等复杂结构。此外，列表在跨浏览器方面的兼容性也更好。
如何在不编写自定义 CSS 的情况下，快速在 Tailwind 中为列表添加类似 Bootstrap 的样式？很简单，使用这个divide实用程序。
演示：https://play.tailwindcss.com/YpbjZdaJoU
<ul class="divide-y border">
<li class="p-3">a</li>
<li class="p-3">b</li>
<li class="p-3">c</li>
<li class="p-3">d</li>
</ul>
你也可以像其他边框一样更改边框的粗细和颜色。不过，你需要使用 divide 前缀：
<ul class="divide-y-2 border-2 border-red-500 divide-red-500">
<li class="p-3">a</li>
<li class="p-3">b</li>
<li class="p-3">c</li>
<li class="p-3">d</li>
</ul>
结论
感谢您阅读我的帖子。现在您了解了一些减少代码中包含的实用程序类数量的方法。这是一个使用了上述所有技术的最终产品：https://play.tailwindcss.com/LmcYBNmbHl
奖金
深入介绍 TailwindCSS 3.0 新功能的视频。（无关联）