如何基于Tailwind CSS应用自定义font-size，现有写法是否正确需转rem吗

现有写法是否正确 #

你的原生CSS写法逻辑完全可行，可以实现小屏10px、中屏20px、大屏50px的导航菜单字体效果。但既然你已经在使用Tailwind CSS，这种自定义原生CSS的写法不符合Tailwind工具类优先的设计范式，属于没必要的冗余代码。

是否需要将px转换为rem #

可以分场景判断，更推荐转换为rem单位：

• 如果你不需要适配用户的系统字体偏好设置，固定显示字体大小的话，保留px写法也可以正常运行
• 转换为rem收益更高：
  • rem是相对根元素字体大小的单位，用户如果在浏览器中调整了默认字体大小，rem单位的字体会同步缩放，对视力不佳的用户更友好，可访问性更强
  • Tailwind官方默认的所有尺寸相关工具类都采用rem单位，用rem也更符合Tailwind的默认设计规范

常规转换规则（浏览器默认根字体16px的场景下）：10px = 0.625rem、20px = 1.25rem、50px = 3.125rem。

更符合Tailwind规范的实现方式 #

你完全不需要自定义.nav-link类，直接在导航链接的HTML标签上添加对应的工具类即可：

• 用px的写法：text-[10px] md:text-[20px] lg:text-[50px]
• 用rem的写法：text-[0.625rem] md:text-[1.25rem] lg:text-[3.125rem]

如果这类字体尺寸需要在项目中多处复用，你也可以在tailwind.config.js中自定义字体大小规则，后续直接调用自定义工具类即可。

内容的提问来源于stack exchange，提问作者thomas paulson