How and Why to Un-Reset Tailwind's CSS Reset

#tailwindcss #css #nextjs

Tailwind CSS comes with a great CSS Reset, called Preflight. It starts with the awesome Normalize.css project, and then nukes all default margins, styling, and borders for every HTML element. This is so that you have a consistent, predictable starting point with which to apply your visual utility classes separate from the semantic element names.

That's great. So why would you want to unreset a CSS Reset?!

Note from Adam Wathan - they are working on a Tailwind plugin to do this for you properly rather than my janky unofficial solution. See also his talk on Tailwind CSS Best Practices.

The Why

Without unresetting, here's how this post you're reading would look on my own demo site:

This is because this blogpost is authored in Markdown, processed through JDown, and then rendered into our Next.js app with React's dangerouslySetInnerHTML API. Despite the name, this is the main way to inject externally generated HTML into Preact/React pages:

<div dangerouslySetInnerHTML={{ __html: post.contents }} />

However, this content comes without any Tailwind classes, and because I'm writing this in Markdown, there's really no way to add the Tailwind classes in to each element - nor really would you want to.

The solution, prescribed on the Tailwind docs, is to Add Base Styles for the components you want to render like "normal". Effectively doing a CSS "Un-reset"!

The How

I'm not the first to this idea - and a quick trip to Google yielded this Unreset.scss file. Assuming you're using SASS, you could basically copy it over to your tailwind.scss and namespace it under an unreset class:

.unreset {
  // paste unreset.scss here!
}

And then in your JSX, you can add that unreset class in:

<div className="unreset" dangerouslySetInnerHTML={{ __html: post.contents }} />

Job done! Right?

The How - Tailwind style!

Nah, I still don't love it. First of all, any customization to colors and margins that you've done won't be respected, because you've "Un-Reset" them to magic numbers. Your blog content will look inconsistent from the rest of your site 💩

The Tailwind Way™ to do it would be to go through all the unreset.css styles and translate them to Tailwind classes as far as possible, so that they will conform as close as possible.

.unreset {
  a {
    @apply text-blue-700 underline;
  }
  p {
    @apply my-4;
  }
  // etc...
}

Since Tailwind's Preflight CSS Reset doesn't reset absolutely everything, you should really diff Preflight against unreset.css in order to figure out what to unreset, so as not ship excess CSS.

Sound like a chore? It is. I've done it for you here!. You can also see it in action on this demo.