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.

Using Splendid AI — A Tailwind Utility for Astro

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

10 Principles of Proper Database Benchmarking

5 Caching Mechanisms to Speed Up Your Application

A Guide to Paying Less For AWS CloudFront

Accelerate Spark and Hive Jobs on AWS S3 by 10x with Alluxio as a Tiered Storage Solution

Accelerating Analytics by 200% with Impala, Alluxio, and HDFS at Tencent

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

10 Principles of Proper Database Benchmarking

5 Caching Mechanisms to Speed Up Your Application

A Guide to Paying Less For AWS CloudFront

Accelerate Spark and Hive Jobs on AWS S3 by 10x with Alluxio as a Tiered Storage Solution

Accelerating Analytics by 200% with Impala, Alluxio, and HDFS at Tencent

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps