When using Tailwind with Astro, you’ll notice that stop working when you use it with Astro Components or Slots. Tailwind’s space utilities 
<div class='space-y-4'>
  <Component client:load />
  <Component client:load />
</div> The reason is simple. I’ve written about the cause in and how to fix it. a previous article 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 Splendid UI Astro Space Utility documentation . Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂. By the way, this article was originally written on my blog

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Using Splendid AI — A Tailwind Utility for Astro

Too Long; Didn't Read

Zell Liew

STORY’S CREDIBILITY

Code License

Guide

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Using Splendid AI — A Tailwind Utility for Astro

Too Long; Didn't Read

Zell Liew

STORY’S CREDIBILITY

Code License

Guide

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES