Make Tailwind headings and typography responsive

Question

I want to make my headings h1, h2, h3 etc responsive. I thought I could do something like:

h1 {
@apply text-lg lg:text-2xl xl:text-3xl;
}

But then I get an error.

How do I solve this best?

Answer 1

UPDATE:

This question was asked when Tailwind 1.2 was in use. Since version 1.7 Tailwind supports pseudo classes in @apply directive. In first it was experimental feature that had to be turned on manually in config, but currently it is normal functionality.

So code from question will work just fine.

Source: https://blog.tailwindcss.com/tailwindcss-1-7

Unfortunately you cannot do it that way:---

From tailwind docs:

It's important to understand that @apply will not work for inlining pseudo-class or responsive variants of another utility. Instead, apply the plain version of that utility into the appropriate pseudo-selector or a new media query

https://tailwindcss.com/docs/functions-and-directives/

Instead you have @screen for this. So in your case it will be.

h1 {
   @apply text-lg;

   @screen lg {
      @apply text-2xl;
   }

   @screen xl {
      @apply text-3xl;
   }
}

Or

h1 {
   @apply text-lg;
}

@screen lg {
   h1 {
      @apply text-2xl;
   }
}

@screen xl {
   h1 {
      @apply text-3xl;
   }
}