在 reactjs 全局缩放 tailiwnd 字体大小

Question

在我的 React 应用程序中，使用 tailwind css，是否有任何我可以调整的全局设置，以便我的 fonts 随屏幕尺寸缩放。 例如，在大于 2xl 的屏幕上，我希望我的 text-sm 为 1 rem 而不是默认的 0.875rem

Answer 1

在您的 CSS 中，您可以添加：

@media (min-width: 1536px) {
    .text-sm {
        font-size: 1rem !important;
    }
}

这基本上会覆盖任何带有text-sm class 标签的元素的font-size属性。

1536px来自官方的 Tailwind 参考资料，其中详细解释了响应式设计。

您需要添加!important以强制应用 CSS。