'Tailwind CSS custom Typography

I'm trying to create a custom typography for my app.

This are my classes. as an example:

main.css

:root {
      --typescale-display-large:
        font-size: 57px,
        line-height: 64;
    
      --typescale-display-medium:
        font-size: 45px,
        line-height: 52;
    
      --typescale-display-small:
        font-size: 45px,
        line-height: 52;
}

after downloading

npm install -D @tailwindcss/typography

in tailwind.config.js inside in extend.

  typography: {
    'display-large': 'var(--typescale-display-large)',
    'display-medium': 'var(--typescale-display-medium)',
    'display-small': 'var(--typescale-display-small)',
  },

I just try it this way, but I didn't find an example in the documentation of using typography for writting custom typography, what I read, this was just for overriding the typography classes in tailwind. and it still doesn't work.

When trying to use this class. I tried using:

   <p class="typography-display-large">hi</p>

I also tried

 <p class="prose prose-display-large">hi</p>

But it doesn't work. here is a link where from the docu I read https://tailwindcss.com/docs/typography-plugin

tailwind-css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Tailwind CSS custom Typography

Sources

Related Questions