使用 React + Tailwind 调整字体中图标大小的问题

Question

我一直在尝试学习 React 和 Tailwind，但由于某种原因，我无法根据 font Awesome 调整图标大小。我尝试尽我所能，使用顺风的

size="sm"

和

h-px w-px

，但没有任何改变，请问有人可以帮助我吗？

./app/page.tsx

import Nav from "@/public/nav";

export default function Home() {
  return (
    <>
      <Nav />
      <div className="bg-red-700 w-full h-screen"></div>
    </>
  );
}

./app/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

./public/nav.tsx

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUtensils } from "@fortawesome/free-solid-svg-icons";

export default function Nav() {
  return (
    <div>
      <span className="w-2 h-2">
        <FontAwesomeIcon
          icon={faUtensils}
          size="sm"
          style={{ color: "#00000d" }}
        />
      </span>
    </div>
  );
}

我尝试使用 fonts Awesome 中的

size="sm"

和 tailwind 中的

h-px w-px

，我在堆栈溢出处寻找有相同问题的人，但没有找到解决方案。

Answer 1

您能否提供可以看到问题的运行代码示例（沙箱等）？

size="sm"

应该可以工作。