Splendid Astro Spacing — A Tailwind Utility for Astro

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 wrote about the cause in a previous article and how to fix it.

You can read that article for more information, but the gist is:

1. Astro components and slots wrap it’s contents in a div that has display: contents
2. 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 just 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 it 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, just enjoy something that works! 🙃).

That’s it!

Further Reading

• Splendid UI
• Astro Space Utility documentation

By the way, this article is 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! 🙂.