无法使用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，它将适应该高度。