CSS Flex - 使用 TailwindCSS 设置相同的宽度

Question

我有以下 React 代码(+Tailwind CSS):

<section className={"flex flex-col items-center"}>
      {managers.map((manager) => (
        <UserCard user={manager} />
      ))}

      <section className={"flex flex-row"}>
        {coWorkers.map((coWorker) => (
          <UserCard user={coWorker} isMarked={user.id === coWorker.id} />
        ))}
      </section>

      {engineers.map((engineer) => (
        <UserCard user={engineer} />
      ))}
    </section>

虽然 UserCard 很简单:

export default function Error({ user, isMarked }: Props) {
  return (
    <article
      className={`bg-purple-500 shadow-lg m-3 p-3 text-white rounded-lg ${
        isMarked && "border-4 border-purple-800 font-bold"
      }`}
    >
      <h1>
        {user.firstName} {user.lastName}
      </h1>
      <h2>{user.email}</h2>
    </article>
  );
}

问题:卡片的宽度不同，例如:
知道如何使用 tailwindcss 确保它们的宽度相同吗？ (在每一行/列中)

Answer 1

您可以为主 div 指定固定宽度

flex flex-col items-center w-1/3

然后对于每个 child 都有全宽

bg-purple-500 shadow-lg m-3 p-3 text-white rounded-lg w-full