When using Tailwind with Astro, you’ll notice that Tailwind’s space utilities stop working when you use it with Astro Components or Slots.
<!-- Doesn't work when using with Astro components and slots -->
<div class='space-y-4'>
<Component client:load />
<Component client:load />
</div>
The reason is simple. I’ve written about the cause in a previous article and how to fix it.
You can read that article for more information, but the gist is:
-
Astro components and slots wrap their contents in a div that has
display: contents -
The
* + *selector, which Tailwind uses for its space utilities, cannot target the elements within these Astro components and slots
A simple fix
Fixing this is simple. We have to modify Tailwind’s space utilities with a plugin — so they can dive one level beyond Astro’s components and slots.
I’ve created this plugin and added it as part of Splendid UI. You can install Splendid UI like this.
npm install splendid-ui
Then you can use the plugin in your Tailwind config file like this:
module.exports = {
plugins: [require('splendid-ui/tailwind/plugins/astro-space.cjs')],
}
(I know the path looks long and complicated right now. It's something I'll simplify in the future as Splendid UI becomes more mature. For now, enjoy something that works! 🙃).
That’s it!
Further Reading
By the way, this article was originally written on my blog. Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.