Responsive Typography in Sage 11 using default Tailwind settings.

sage
1

This is more a question about proper setup with tailwind and theme.json

If i keep the default settings in the theme.json. It generates the 8 font sizes that tailwind uses for defaults. Then in WordPress, a user can set the sizes in the style → Typography panel. That’s fine and what I would expect. However, out of the box, using this approach, there’s no way to make the declared size responsive. A user that sets an H1 to extra large is stuck at 6em.

I know I can override tailwinds default settings and make up my own sizes using and make them fluid, but wanted to check if there’s another way before going down that path.

2

Below how I override the defaults. It’s a hybrid TW/WP solution that uses elements of both.

In theme.json I set my sizes as appropriate for the site (the TW defaults do not always work well):
{
“size”: “1.875rem”,
“fluid”: {
“min”: “1.5rem”,
“max”: “1.875rem”
},
“slug”: “3xl”,
“name”: “3X Large (H2 30px)”
},

Smaller sizes (16, 20px) are usually not set to be fluid.

Then I use the built in, WP generated variables:

@utility has-3-xl-font-size {
font-size: var(–wp–preset–font-size–3-xl); /* from theme.json */
line-height: clamp(2rem, 1.7273rem + 1.3636vw, 2.625rem);
}

And I set them as default on the HTML:

h2 {
@apply has-3-xl-font-size;
}

This way:

  • Sensible defaults are set for all structural elements (H1, H2, p etc)
  • They can be easily overridden in the editor when needed
  • I can use ‘has-3-xl-font-size’ in my Blade templates
  • Tailwind defaults remain as they are and are available if needed

Would love to hear alternative methods for this.

1 Like
3

Thanks for replying. Does that mean you don’t set default styles for your Headers in your theme.json? That would help render them correctly in the editor, but it also doubles up the styles i would think.

This may be a different issue, but i noticed the CSS variable has a hyphen, between “3” and “xl” but it doesn’t in the slug. Is this change made by WordPress? I wasn’t sure if i had a cache issue or if its just something WP overrides. Thanks!

4

It never occurred to me to set default sizes for headers in theme.json. :slight_smile:
I set the sizes once and then apply to all elements (if I need a smaller h2, I set it to one of the smaller sizes.)

WP adds the hyphen before a number in the variables..