不采用全TailwindCSS行宽度和高度的div

Question

我试图让我的卡组件采取我的4x4Tailwincss栅格的全部宽度和高度，现在他们只需要大约1/4的全宽度，即使是w-max。

这是我的密码：

function Card({ title, description }: Props) {
  return (
    <div className="border border-zinc-700 hover:bg-white-500 p rounded-md m-auto my-8">
      <div className="px-5 py-4">
        <h3 className="text-2xl mb-1 font-medium">ok</h3>
        <p className="text-zinc-300">{title}</p>
      </div>
      <div className="border-t border-zinc-700 bg-zinc-900 p-4 text-zinc-500 rounded-b-md">
        {description}
      </div>
    </div>
  );
}

export default function Home() {
  return (
    <section className="bg-black">
      <section className="bg-black">
        <div className="max-w-6xl mx-auto py-8 sm:py-24 px-4 sm:px-6 lg:px-8">
          <div className="sm:flex sm:flex-col sm:align-center">
            <h1 className="text-4xl font-extrabold text-white sm:text-center sm:text-6xl">
              Nom
            </h1>
            <p className="mt-5 text-xl text-zinc-200 sm:text-center sm:text-2xl max-w-2xl m-auto">
              The Best Electronic Arbitrage Opportunity Finder.
            </p>
          </div>
        </div>
      </section>
      <section className="bg-zinc-900 flex items-center justify-center h-screen">
        <div className="grid grid-cols-2 gap-1 w-4/5 place-items-center auto-cols-max auto-rows-max">
          <Card title="card-1" description="desc-1"></Card>
          <Card title="card-2" description="desc-2"></Card>
          <Card title="card-3" description="desc-3"></Card>
          <Card title="card-4" description="desc-4"></Card>
        </div>
      </section>
    </section>
  );
}

Answer 1

您需要将w-full添加到卡组件主div中，例如：

 <div className="w-full border border-zinc-700 hover:bg-white-500 p rounded-md m-auto my-8">
      <div...>

请参阅代码的这个顺风的例子。

班级将宽度设置为最大内容宽度，w-full将使用100%的可用空间。

Answer 2

w可能是您的div的最大值。

它是为更多的响应行为而创建的。

W-满是“100%宽”。

w-max是“除数的最大宽度值”。

如果你想知道；

H-满和h-max将给您的div的高度类似的行为。