如何将基本字体大小覆盖为 62.5%？

Question

我正在尝试将基本字体大小覆盖为 62.5%。我在 tailwind.config.js -

中添加了这段代码

plugins: [
    plugin(function ({ addUtilities }) {
        addUtilities({
            'html': {
                'font-size': '62.5%'
            }
        });
    })
]

使用这种方法，我的项目中的所有字体看起来都很小，其他 class 像边距、填充使用这个 62.5% 作为基本单位。

为了让它工作，我必须手动将他们现有的 class 覆盖到 tailwind.config.js 中的新单元，这太耗时了。是否有更好的解决方案将 tailwind 基本字体大小转换为 62.5%？

plugins: [
    plugin(function ({ addUtilities }) {
        addUtilities({
            'html': {
                'font-size': '62.5%'
            },
            '.text-xs': {
                'font-size': '1.2rem',
                'line-height': '1.6rem'
            },
            '.text-sm': {
                'font-size': '1.4rem',
                'line-height': '2rem'
            },
            '.text-base': {
                'font-size': '1.5rem',
                'line-height': '1.8rem'
            },
            ....
        });
    })
]

Answer 1

Tailwind 将此作为内置配置。您可能需要做一些基本的数学运算。 https://tailwindcss.com/docs/font-size#font-sizes

Answer 2

你可以通过将这段代码添加到你的 input.css 文件中来做到这一点

html {
  font-size: 62.5%;
}

提示：您可以通过将此命令添加到您的 vscode 设置来更改扩展工具提示 "tailwindCSS.rootFontSize": 10, // <- your root font size here

如何将基本字体大小覆盖为 62.5%？

How do I override the base font size to 62.5%?

css

tailwind-css