excited => confused => happy - AKA the learning-Tailwind-CSS version of the Gartner hype cycle.
When I first started out with Tailwind CSS, it was exciting to see some of the awkward html/body/etc defaults get blown away (yay, no awkward margins!). The explicit nature of Tailwind CSS felt a little clonky, but ultimately super powerful - no hidden styling and everything is right next to your components.
That said, have you ever styled a list with Tailwind? The first time you throw that
<ul><li></li></ul> tag combo out there, the list comes out flush against the left border, no bullets anywhere to be found. Chaos reigns.
Where are the default styles!?
Tailwind CSS by default has a thing they call Preflight, also known as clearing nearly all the default CSS styling. For the reasons I mentioned earlier, it's super useful! But since Tailwind focuses on explicit-styling, it means that things like MDX that I used to build this garden make assumptions about some styling that will exists globally/by default on the page.
How this looks in practice:
In the before, some very basic styling remains (
<b> tags, for example), but the vast majority of styling is missing. The after shows the basic styling that was added using a custom
Styling content with limited control
Building this site put me into the case where I've got unstyled MDX content with limited control over individual elements due to the auto-generation. This flies directly in the face of how Tailwind likes to operate with it's styles cozied up alongside elements. Instead of globally disabling this (it's super useful anywhere you're actually using Tailwind), we can write a custom
MDXProvider, starting with the setup from the Next.js blog. I copied over the full file at the time of writing and threw it in a gist: