TailwindCSS 如何设置将字体大小单位生成为 em 而不是 rem ？

在 Tailwind CSS 中，默认情况下，字体大小的单位是使用 rem。但是，如果想要改变单位到 em，可以通过自定义 Tailwind 的配置文件来实现。

首先，你需要安装 Tailwind CSS 并创建一个配置文件（如果尚未创建）。通常通过运行 npx tailwindcss init 来生成 tailwind.config.js 文件。

接着，你可以在 tailwind.config.js 中定制 fontSize 配置，将需要的字体大小单位改为 em。这里是一个基本的例子：

javascript
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'xs': ['0.75em', { lineHeight: '1rem' }],
        'sm': ['0.875em', { lineHeight: '1.25rem' }],
        'base': ['1em', { lineHeight: '1.5rem' }],
        'lg': ['1.125em', { lineHeight: '1.75rem' }],
        'xl': ['1.25em', { lineHeight: '1.75rem' }],
        '2xl': ['1.5em', { lineHeight: '2rem' }],
        '3xl': ['1.875em', { lineHeight: '2.25rem' }],
        '4xl': ['2.25em', { lineHeight: '2.5rem' }],
        '5xl': ['3em', { lineHeight: '1' }],
        '6xl': ['3.75em', { lineHeight: '1' }],
        '7xl': ['4.5em', { lineHeight: '1' }],
        '8xl': ['6em', { lineHeight: '1' }],
        '9xl': ['8em', { lineHeight: '1' }],
      },
    },
  },
}

如上所示，我定义了各种尺寸的字体大小并将它们的单位设置为 em。同时，我还为每个尺寸设置了 lineHeight，这些也是可以根据需要进行调整的。

通过这种方式，你可以灵活地为项目中的特定部分或整个项目设置 em 单位的字体大小。这样的设置可以帮助你更好地控制组件或元素的相对大小，特别是当它们需要相对于其父元素的字体大小进行缩放时。