Use em for font sizes to support responsive typography

[kripod]

By using em instead of rem for font sizes, inheritance would make responsive font sizing easier. For example:

<div class="md:text-responsive-lg xl:text-responsive-xl">
  <p class="text-base">Hello, world!</p>
</div>

With the following tailwind.config.js:

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

      "responsive-lg": "1.125em",
      "responsive-xl": "1.25em",
    },
  },
};

[minimit]

I think it's a bad idea to waterfall all font sizes, it would become a font size nightmare to set the right font size when nesting. For example if you are in that example, how to make p exactly the size you want? you need to check each parent font size and it's very hard to calculate.