Tailwind Tips — Maintaining global typography styles

Have you ever worked on a project in TailwindCSS and thought to yourself: "man... I wonder how I could make typography styling easier". I certainly have. Let me paint you a picture.

Let's say we're building a SaaS landing page, we have h1, h2, h3, and p tags that are already styled in our design system. Now, in TailwindCSS, for every typography element, we'll need to style those element doing something like:

<h1 class="text-5xl font-semibold leading-snug text-blue-500">...</h1>
<h2 class="text-3xl font-semibold leading-relaxed text-white">...</h2>
<h3 class="text-xl font-medium leading-relaxed text-white tracking-tight">...</h3>
<p class="text-lg leading-relaxed">...</p>

See the issue here? We're manually defining all of these utility classes for each element. Every. Single. Time. HTML is not TypeScript, there is no IDE checking and making sure that you're adhering to the design system for every typography element. It's very easy to miss a leading-relaxed here, maybe a font-semibold there, and god forbid we start introducing responsive stylings into this.

🌐 Maintaining global styles

So, there are a few methods to tackling this problem. The one I'm proposing is arguably the simplest solution but also a little controversial.

Why controversial? Well, we're going to use CSS and Tailwind's @apply directive.

In this small, but practical, example, we've defined exactly 1 h1 tag, 3 h2 tags, and 4 p tags. In other words, we've defined long-form classnames (remember our styling from h2 above?) a total of 8 times in this small excerpt.

While some developers advocate for this repetition for its explicit nature, I find it hard to maintain as the site grows bigger. Do I just copy the h2 styles I wrote on Day 1 and apply that to the rest of the site whenever I need an h2? What if I change the style of my h2, how will I update that site-wide?

We need a better solution for applying global typography styling like this and I think I know the way: we use the @apply directive.

Adam Wathan, creator of Tailwind, does not actually advocate for the use of @apply within the framework, siting it as almost of an anti-pattern.

Per his words: "you should almost never use it"

The key here: almost never.

In this case we will use it to maintain global typography styles because it actually makes styling text extremely trivial.

Start by creating a new components layer in your CSS file (the same one where you define your Tailwind base directives):

// tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {}

Then, extract your typography styles right into components using @apply:

// tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    h1, .h1{
    	@apply text-5xl font-semibold leading-snug;
    }
    
    h2, .h2 {
		@apply text-3xl font-semibold leading-relaxed;
    }
    
    h3, .h3{
    	@apply text-xl font-medium leading-relaxed tracking-tight;
    }
    
    p, .p{
        @apply text-lg leading-relaxed;
    }
}

That's about it!

You might notice a little bit of repitition going on here where we define h1 and .h1. There's a method to this madness. What we're doing is styling all h1 tags by default and introducing a .h1 class that you can use in case you want to style some non-h1 tag in an h1 style.

Also notice, I don't define colors in the global typography styling. Colors change very often in design and I don't think it's worth extracting that into the global styles.

Remember, what we've essentially done here is apply some default styling to typography elements, in the end, they can still be customized further:

<h1 class="text-blue-500">...</h1>

In this example, our h1 is really styled with: text-5xl font-semibold leading-snug text-blue-500.

Now, if you want to make updates, all you have to do is update your CSS file.

Hopefully this makes it easier for your to maintain your global CSS styles.