DEV Community


Posted on • Updated on • Originally published at

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

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 }} />
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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

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

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...
Enter fullscreen mode Exit fullscreen mode

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.

Video Demo

I recorded this as a video for my ongoing CMS project!


Here's my demo site after unresetting:


Of course, like everything Tailwind, feel free to customize to match your exact usecase. I just helped you get started.

That's it for this blogpost, thanks for reading!

Top comments (5)

danawoodman profile image
Dana Woodman

Now Tailwind has "prose" which is a plugin to do something similar, worth checking out:

rifkinada profile image
Nada Rifki

Worked like a charm 🪄 Thank you!

rohan843 profile image
Rohan Sharma

Worked like a charm!

patarapolw profile image
Pacharapol Withayasakpunt • Edited

Save my life with Markdown editor here.

There is an easier way in official doc -- Disabling preflight

swyx profile image

not my goal - that disables preflight globally, i want to locally disable preflight