Tailwind and font sizing

Tailwind is an awesome, utility-first CSS framework, that you probably have heard of by now. If not, make sure to check it out.

A very neat feature is the ability to apply utility classes conditionally at different breakpoints, like so:

<h2 class="text-lg md:text-xl">Hello world</h2>

This means that this headline will be slightly smaller on small screens or browser windows, like mobile devices, and a bit larger on windows that are at least 768px in width.

This is great, but when it comes to font-sizing, wouldn't it be nice to not have to do this on each and every element?

One solution I've used lately is to only use one font-size class:

<h2 class="text-xl">Hello world</h2>

And then tweak the font-size globally for smaller widths:

@media (max-width: 640px) {
  :root {
    font-size: 12px;
  }
}

Or if you want to do it the Tailwind way:

@screen sm {
  :root {
    font-size: 12px;
  }
}

Since font-sizes by default in Tailwind are set in REM's, this will scale them down with 25% for small widths, everywhere a font-size class is used.

And of course you can override this by using breakpoint-prefixed classes for certain elements if you need to. But using this technique as a base setting has worked out pretty good for me.

This concept could be taken further, by also using it for example margins and paddings, in order to reduce the amount of breakpoint-prefixed classes.