TailWind覆盖在自定义媒体查询上的HTML标签中定义的基本字体大小

问题描述 投票:0回答:0

这是我的角度应用中我的tailwind.config.js。配置中的所有内容都按预期工作,除了自定义媒体查询。

html { font-size: 62.5%; } @media (min-width: 480px) { html { font-size: 10px; } }
在root文件中,i覆盖页面的默认值

font-size

to to to,对于大多数用户而言,考虑到默认情况下,大多数用户是16px。
该字体大小在我的应用程序中正确地应用了我的应用程序。

示例:

62.5%
是48px,是正确的。
但是,当涉及到
10px
部分时,它根据初始默认值
font-size
值计算值。
表示屏幕断点

rem应为

10 * 48 = 480px
,但它是
16 * 48 =768px
.
TailWind识别我使用的自定义断点,但是它基于错误的计算它们的像素

class

html

class="flex size-[4.8rem]"

这对我来说不是问题,但对于其他开发人员来说,这不是很难理解正在发生的事情,这根本不是直观的。

我尝试了什么
我尝试定义基础
screens
tailwind.config.js
中,它不起作用

在媒体查询中删除了

font-size

,可以从我上面粘贴的

16px

中看到。
这些没有帮助。 versions 角14

tailwind3.4.17

POSTCSS8.5.1

    您尝试了
  1. !重要的关键字吗?如果不是尝试以下代码。
    请在以下10px之后添加!重要的是,然后检查一次。
    
    xs: "48rem"
angular fonts responsive-design frontend tailwind-css
© www.soinside.com 2019 - 2024. All rights reserved.