无法使用 Tailwind 在 CSS 中获得百分比

Question

因此，我正在尝试创建一张卡片，其右侧为信息，左侧为紫色（如果已选中）。我正在使用 Next 和 TailwindCSS。

这是我渲染卡片的父组件：

{files ? (
  <div className="ml-6 mt-8 absolute">
    {files.map((value) => {
      return <FileCard key={value.id} file={value} />
    })}
  </div>
) : (
  <div>graphql not working :(</div>
)}

这是 FileCard 组件：

return (
    <div className="flex justify-content items-center mb-4 w-72 bg-white rounded-lg shadow-lg relative">
        <div className="h-full w-2 bg-indigo-600 relative rounded-l-lg"></div> <- // here the h-full not working
        <div className="py-4 px-4 flex justify-between items-center">
            <div className="flex flex-col justify-center align-start text-sm font-bold">
                <p>{file.title}</p>
                <p className="text-xs">Last updated: {date.toString()}</p>
            </div>
        </div>
    </div>
)

预期结果：

实际结果：

如果我用h-20 硬编码高度：

Answer 1

如官方tailwindcss中所述docs

使用 h-full 将元素的高度设置为其父元素的 100%，只要父元素具有定义的高度。

100% 高度仅在父元素定义了固定高度时才有效。

因此一种可能的解决方案是设置父元素的高度，例如：

<div className="h-20 flex justify-content items-center mb-4 w-72 bg-white rounded-lg shadow-lg relative">

在这里，我将高度设置为 20，相当于 5rem。您可以根据需要进行设置，如果应用 h-full，内部 div 将适应该高度。