The 62.5% font size trick with Tailwind

If you're like me, you probably like even numbers, ever since I've found out about this "trick", I have been using it constantly with all my projects. However with tailwind there seems to be no easy way to do this.

Copy the code below to your tailwind config file and set the baseFontSize to your desired one

JS tailwind.config.js
const baseFontSize = 10

module.exports = {
	content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {

    extend: {
      spacing: () => ({
        ...Array.from({ length: 96 }, (_, index) => index * 0.5)
          .filter((i) => i)
          .reduce(
            (acc, i) => ({ ...acc, [i]: `${i / (baseFontSize / 4)}rem` 		 }),
            {}
          ),
      }),
      fontSize: {
        xs: [
          `${(16 * 0.75) / baseFontSize}rem`, /* 12px */
          {
            lineHeight: `${(16 * 1) / baseFontSize}rem` /* 16px */,
          },
        ],
        sm: [
          `${(16 * 0.875) / baseFontSize}rem`, /* 14px */
          {
            lineHeight: `${(16 * 1.25) / baseFontSize}rem` /* 20px */,
          },
        ],
        base: [
          `${(16 * 1) / baseFontSize}rem`, /* 16px */
          {
            lineHeight: `${(16 * 1.5) / baseFontSize}rem` /* 24px */,
          },
        ],
        lg: [
          `${(16 * 1.125) / baseFontSize}rem`, /* 18px */
          {
            lineHeight: `${(16 * 1.75) / baseFontSize}rem` /* 28px */,
          },
        ],
        xl: [
          `${(16 * 1.25) / baseFontSize}rem`, /* 20px */
          {
            lineHeight: `${(16 * 1.75) / baseFontSize}rem` /* 28px */,
          },
        ],
        "2xl": [
          `${(16 * 1.5) / baseFontSize}rem`, /* 24px */
          {
            ineHeight: `${(16 * 2) / baseFontSize}rem` /* 32px */,
          },
        ],
        "3xl": [
          `${(16 * 1.875) / baseFontSize}rem`, /* 30px */
          {
            lineHeight: `${(16 * 2.25) / baseFontSize}rem` /* 36px */,
          },
        ],
        "4xl": [
          `${(16 * 2.25) / baseFontSize}rem`, /* 36px */
          {
            lineHeight: `${(16 * 2.5) / baseFontSize}rem` /* 40px */,
          },
        ],
        "5xl": [
          `${(16 * 3) / baseFontSize}rem`, /* 48px */
          {
            lineHeight: (16 * 1) / baseFontSize,
          },
        ],
        "6xl": [
          `${(16 * 3.75) / baseFontSize}rem`, /* 60px */
          {
            lineHeight: (16 * 1) / baseFontSize,
          },
        ],
        "7xl": [
          `${(16 * 4.5) / baseFontSize}rem`, /* 72px */
          {
            lineHeight: (16 * 1) / baseFontSize,
          },
        ],
        "8xl": [
          `${(16 * 6) / baseFontSize}rem`, /* 96px */
          {
            lineHeight: (16 * 1) / baseFontSize,
          },
        ],
        "9xl": [
          `${(16 * 8) / baseFontSize}rem`, /* 128px */
          {
            lineHeight: (16 * 1) / baseFontSize,
          },
        ],
      },
    },
  },
	plugins: []
};

You also need to set these values in your main CSS file index.css

CSS index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-size: 62.5%;
}

body {
  font-size: 16px;
}

That's it, now if you prefer to use rems for styling 1 rem would be equal to 10px, instead of the browser default of 16px;

That's all.