Splendid Astro Spacing — A Tailwind Utility for Astro

Created on November 12, 2023 at 11:14 am

When using Tailwind PRODUCT with Astro PERSON , you’ll notice that Tailwind ORG ’s space utilities stop working when you use it with Astro Components ORG or Slots .

<!– Doesn’t work when using with Astro ORG 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:

Astro PERSON components and slots wrap it’s contents in a div that has display: contents The * + * selector, which Tailwind PRODUCT uses for its space utilities, cannot target the elements within these Astro ORG components and slots

A simple fix

Fixing this is simple. We just have to modify Tailwind ORG ’s space utilities with a plugin — so they can dive one CARDINAL level beyond Astro ORG ’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 PRODUCT 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 PERSON becomes more mature. For now, just enjoy something that works! 🙃).

That’s it!

Further Reading

Connecting to blog.lzomedia.com... Connected... Page load complete