我认为在JSX组件中使用Tailwind传递一些道具来处理Tailwind属性会很好，因为我希望在不同的情况下使用。
但是，JSX组件中的Tailwind的某些样式不会呈现。
让我举一个例子。

// Flex.jsx
export function Flex({ gap, justify, items, children }) {
  const styles = [
    "flex",
    `gap-${gap || "0"}`,
    `justify-${justify || "center"}`,
    `items-${items || "center"}`,
    "bg-slate-300",
  ].join(" ");

  return <div className={styles}>{children}</div>;
}

我在上面制作的Flex组件在NextJS页面中不会呈现如下所示。例如，我给了一个间距值4，但是div标签之间没有间距。

// index.jsx
const Home: NextPage = () => {
  return (
    <div>
      <Flex gap={"4"} justify={"center"} items={"end"}>
        <div className="bg-green-300">Apple</div>
        <div className="w-32 h-32 bg-yellow-300">Banana</div>
        <div className="w-44 h-44 bg-red-300">Orange</div>
      </Flex>
    </div>
  );
};

我已经用标准的方式检查了它（即Tailwind内联样式），如下所示。在本例中，Tailwind样式被正确渲染，并且当我修改它们时，更改立即反映出来。

<div className="flex gap-2 justify-center items-end bg-slate-200">
  <div className="bg-green-300">Apple</div>
  <div className="w-32 h-32 bg-yellow-300">Banana</div>
  <div className="w-44 h-44 bg-red-300">Orange</div>
</div>

问题

你能告诉我为什么JSX组件中的Tailwind没有渲染吗？

当前行为

“苹果”、“香蕉”和“橙子”的div标签之间没有间隔。

预期行为

“Apple”、“Banana”和“橙子”的div标签之间存在间隙。

再现

***Node.js版本：**v18.12.0
***复制存储库：**针对此问题修改了Next.js + Tailwind CSS Example版本

步骤
1.安装并启动示例

git clone https://github.com/comverser/with-tailwindcss.git
cd with-tailwindcss
npm install
npm run dev

1.访问本地主机：3000