Setting Tailwind Typography Default Header Font

user10012 0
Viewed 12

What is the best way to set all headers in my prose class to a specific font?

The following is what I have, but does not seem to be working:

theme: {
 typography: {
  DEFAULT: {
    css: {
      h1: {
        fontFamily: ['Bebas Neue', 'sans-serif'],
      },
      h2: {
        fontFamily: ['Bebas Neue', 'sans-serif'],
      },
      h3: {
        fontFamily: ['Bebas Neue', 'sans-serif'],
      },
      h4: {
        fontFamily: ['Bebas Neue', 'sans-serif'],
      },
      h5: {
        fontFamily: ['Bebas Neue', 'sans-serif'],
      },
...

Also is there a less verbose way to set all headers at once?

tailwind-css
1 Answers

You can use prose-headings variant or any other element modifier you need. Prose headings will target h1, h2, h3, h4, th

<div class="prose prose-headings:text-red-400">
 // Content
</div>

DEMO

Ihar Aliakseyenka0
Related