Tailwind CSS 卡片高度变化导致折叠问题的解决

31次阅读

第一段引用上面的摘要：

本文旨在解决在使用 Tailwind CSS 创建卡片时，因高度设置不当导致卡片折叠的问题。通过分析 Tailwind CSS 的高度类名规则，解释了为何特定高度值会导致卡片塌陷，并提供了使用自定义高度值的方法，帮助开发者避免此类问题，并更灵活地控制卡片的高度。

Tailwind CSS 高度类名与卡片折叠

在使用 Tailwind CSS 构建用户界面时，我们经常会遇到需要精确控制元素高度的情况。然而，在使用预定义的高度类名时，如果选择的值不在 Tailwind CSS 的高度刻度范围内，可能会导致意想不到的问题，例如卡片元素折叠。

问题原因分析

立即学习“前端免费学习笔记（深入）”；

Tailwind CSS 采用了一种基于刻度的设计系统，对于高度、宽度、边距等属性，都预定义了一系列类名，每个类名对应一个特定的数值。例如，h-48、h-52、h-56 和 h-60 都是 Tailwind CSS 中定义的高度类名，分别代表不同的高度值。

当您尝试使用一个不在刻度范围内的值，例如 h-50 或 h-51，Tailwind CSS 默认情况下不会生成相应的 CSS 规则。这意味着元素的高度会回退到其默认值，通常是 height: auto; 或者 height: 0;，这就会导致卡片元素出现折叠的现象。

示例代码分析

以下是一个简单的 HTML 结构，展示了使用 Tailwind CSS 创建卡片时可能出现问题的情况：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">  <button>Toggle Height</button>  <div class="mx-auto px-4">   <div class="relative w-75 h-60 bg-neutral-500 rounded-2xl truncate border-solid border-indigo-400 border-2">     <div class="absolute w-20 top-0 left-0 group-hover:inset-y-4">       <img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5782.png" alt="nike-air-shoe" />     </div>   </div> </div>

在这个例子中，.relative 元素的初始高度被设置为 h-60。通过 JavaScript 代码，我们可以动态地切换 h-60 和 h-50 这两个类名。

var button = document.querySelector('button'); button.addEventListener('click', function() {   var h = document.querySelector('.relative');   h.classList.toggle('h-50');   h.classList.toggle('h-60'); });

由于 h-50 不在 Tailwind CSS 的默认高度刻度范围内，当应用 h-50 类名时，元素的高度会变为默认值，导致卡片折叠。

塔猫ChatPPT

塔猫官网提供AI一键生成 PPT的智能工具，帮助您快速制作出专业的PPT。塔猫ChatPPT让您的PPT制作更加简单高效。

43

查看详情

解决方案：使用自定义高度值

为了解决这个问题，您可以使用 Tailwind CSS 的 JIT (Just-In-Time) 模式，或者直接使用自定义高度值。

使用 JIT 模式:

JIT 模式允许您在 HTML 中使用任意值，Tailwind CSS 会按需生成相应的 CSS 规则。确保您的 Tailwind CSS 配置启用了 JIT 模式。

使用 h-[value] 语法:

Tailwind CSS 允许您使用 h-[value] 语法来指定自定义高度值，例如 h-[50px] 或 h-[50rem]。这样可以精确地控制元素的高度，避免使用不在刻度范围内的值。

<div class="relative w-75 h-[50px] bg-neutral-500 rounded-2xl truncate border-solid border-indigo-400 border-2">   </div>

或者在javascript中切换class：

var button = document.querySelector('button'); button.addEventListener('click', function() {   var h = document.querySelector('.relative');   h.style.height = h.style.height === '60px' ? '50px' : '60px'; });

注意事项