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

swyxio commented 2 years ago

source: devto devToUrl: "https://dev.to/swyx/how-and-why-to-un-reset-tailwind-s-css-reset-46c5" devToReactions: 19 devToReadingTime: 3 devToPublishedAt: "2020-04-04T13:04:49.296Z" devToViewsCount: 2126 title: How and Why to Un-Reset Tailwind's CSS Reset published: true category: tutorial tags: Tailwind, CSS, Nextjs, TailwindCSS, Tech slug: tailwind-unreset canonical_url: https://www.swyx.io/writing/tailwind-unreset

2021 edit: note that tailwind typography now comes with a not-prose class that unsets typography styles

2023 update: you can also do:
.some-class {
  all: revert; /* locally remove tailwind styles */
}

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.

Video Demo

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

Youtube Link: https://youtu.be/iLEYtgBezhs
Dev.to Embed: {% youtube iLEYtgBezhs %}

Conclusion

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!

jackchoumine commented 2 years ago

How to remove a special base reset rule,like remvoe button?

swyxio commented 2 years ago

no idea, just set css properties to initial?

rorlich commented 2 years ago

I've been breaking my head on this for hours. Thank you so much!

inorganik commented 1 year ago

Like others new to Tailwind I was a little bit gobsmacked by how brutal Tailwind's reset is, and a google search brought me to your article. I added your "unreset" scss and noticed that compiled, it adds over 1500 lines of css! As a web dev it just seems wrong to me that we have to ship extra styles to the browser to just get back to basically default styles. But as you mention in your note, Tailwind now has a prescribed way of doing what you do in your article via the typography plugin. It works the same way by using a parent class to style all the article contents, but only adds around 800 extra lines of css. In light of that, it seems like a better option. Anyway I appreciate this article and your insight!

ijohnpaul2000 commented 1 year ago

Man thank you so much, i was researching things like this for my WSIWYG editor, when parsing the result from the editor, tailwind affects it and disable them. So this blog was superb!