DEV Community

Cover image for Tip: Add Typography as Components to your Tailwind Config
glocore
glocore

Posted on

Tip: Add Typography as Components to your Tailwind Config

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
      });
    }),
  ],
};


Enter fullscreen mode Exit fullscreen mode

Now you can use these components to style your markup, and you'll also receive autocomplete:

Autocomplete in VS Code

Top comments (1)

Collapse
 
bhendi profile image
Jyothikrishna

Thanks for sharing