Components and utilities for the modern web
Tailwind Plugins

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.


First, make sure you install Splendid UI.

npm install splendid-ui

Then require the plugin into your Tailwind project.

module.exports = {
  plugins: [


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 />

That’s it!

Like what you're seeing?

I'm on a quest to make web development extremely easy — by building components and utilities that will help all of us build better apps at a much faster pace.

I'd like to send you an update when I release something new in Splendid UI. If you want to be updated, please leave your email address below.

Powered by Buttondown