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

【问题标题】：How do I override the base font size to 62.5%?如何将基本字体大小覆盖为 62.5%？
【发布时间】：2022-01-08 22:36:02
【问题描述】：

我正在尝试将基本字体大小覆盖为 62.5%。我在tailwind.config.js 中添加了这段代码-

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

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

为了让它工作，我必须手动将他们现有的类覆盖到 tailwind.config.js 中的新单元，这太耗时了。有没有更好的解决方案将顺风基本字体大小转换为 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'
            },
            ....
        });
    })
]

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以通过将此代码添加到您的 input.css 文件来实现

html {
  font-size: 62.5%;
}

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

【讨论】：