FontAwesome size属性不生效，如何用Tailwind工具类控制图标尺寸？

当然可以用Tailwind工具类控制Font Awesome图标的尺寸，而且这通常是比官方size属性更可靠的方式，尤其在Tailwind主导的项目里。

为什么size属性不生效？ #

你开启了config.autoAddCss = true，Font Awesome会自动注入默认样式，但这些样式的优先级可能被Tailwind全局样式或你自定义的类覆盖，导致size属性的效果无法显现。

用Tailwind控制尺寸的具体方法 #

直接给FontAwesomeIcon组件添加Tailwind宽高工具类即可，示例如下：

<FontAwesomeIcon icon="fa-brands fa-linkedin" className="w-8 h-8" />

• w-6 h-6 对应Font Awesome的1x尺寸
• w-8 h-8 对应2x
• w-12 h-12 对应3x
• 也可以用任意值类，比如w-[24px] h-[24px]实现精确尺寸控制

修改你的组件代码后如下：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

// code
<a href="/onboarding/interests" className="px-10 py-3 mt-16 text-lg text-white bg-[#2967BC] rounded-lg hover:bg-[#004182]">
  <span className="flex items-center font-display">
    <FontAwesomeIcon icon="fa-brands fa-linkedin" className="w-8 h-8" />
    <span className="ml-2">Sign in with LinkedIn</span>
  </span>
</a>

额外提示 #

如果坚持想用Font Awesome的size属性，可以把config.autoAddCss设为false，再手动引入Font Awesome的CSS文件，但这样会增加额外样式依赖，不如直接用Tailwind工具类更贴合项目样式规范。

内容的提问来源于stack exchange，提问作者Harsha M V