Astro Space Utility

Tailwind’s space utilities stop working when you use it with Astro components or slots. This happens because Astro uses display: contents with its components and slots. You can read more about this here.

This plugin fixes Tailwind’s space utilities to make them work with Astro components and slots.

Installation

First, make sure you install Splendid UI.

npm install splendid-ui

Then require the plugin into your Tailwind project.

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

Usage

You should be able to use Astro’s space utilities with components and slots once the plugin is installed.

---
import Component from './somewhere.svelte'
---

<div class="space-y-4">
  <Component client:load />
  <Component client:load />
</div>

That’s it!