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

【问题标题】：CSS Flex - Set same width with TailwindCSSCSS Flex - 使用 TailwindCSS 设置相同的宽度
【发布时间】：2021-07-02 14:59:39
【问题描述】：

我有以下 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 确保它们的宽度相同吗？（在每一行/列中）

【问题讨论】：

标签： css reactjs tailwind-css

【解决方案1】：

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

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

那么对于每个孩子都有全宽

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

【讨论】：