DEV Community

Zell Liew 🤗
Zell Liew 🤗

Posted on • Originally published at zellwk.com on

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay