How to generate font-size unit as em instead of rem in windicss?

In Tailwind CSS, font size units default to rem. However, if you want to switch to em, you can achieve this by customizing the Tailwind configuration file.

First, install Tailwind CSS and create a configuration file (if not already present). This is typically done by running npx tailwindcss init to generate tailwind.config.js.

Next, customize the fontSize configuration in tailwind.config.js to set font size units to em. Here's a basic example:

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' }],
      },
    },
  },
}

As illustrated above, font sizes are defined with em units. Additionally, lineHeight values for each size are set, which can be adjusted as needed.

This approach allows you to flexibly apply em units to specific sections or the entire project. This configuration helps you better control the relative sizing of components or elements, especially when scaling relative to their parent element's font size.