Splendid Astro Spacing — A Tailwind Utility for Astro

Zell Liew 🤗 - Nov 28 '23 - - Dev Community

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

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

Then you can use the plugin in your Tailwind config file like this:

module.exports = {
  plugins: [require('splendid-ui/tailwind/plugins/astro-space.cjs')],
}
Enter fullscreen mode Exit fullscreen mode

(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

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! 🙂.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .