Tip: Add Typography as Components to your Tailwind Config

#tailwindcss #webdev #javascript #react

Tailwind allows you to create custom "components" in its config via plugins.

Here's a hack to define your typography as tailwind components, using Tailwind utilities:

// tailwind.config.ts

import plugin from 'tailwindcss/plugin';

export default {
  // ...the rest of your config

  plugins: [
    plugin(({ addComponents }) => {
      addComponents({
        ".typography-h1": {
          "@apply text-[2rem] lg:text-[2.5rem]": "",
        },

        ".typography-h2": {
          "@apply text-[1.5rem] lg:text-[2rem]": "",
        },

        // ...rest of your typography
      });
    }),
  ],
};