Passing Class Properties to Astro Components

This article explains how to use class:list in Astro to pass the class property to child components, making your components more reusable.
You can easily extend styles by adding classes from parent to child components.

Component

---
const { class: className, ...props } = Astro.props;
---
 
<div class:list={["container", className]} {...props}><slot /></div>
 
<style>
  .container {
    width: 100%;
    max-width: 1032px;
    padding-inlinbe: 1em;
    margin-inline: auto;
  }
</style>

Usage Example

<Container class="px-4">
  <p>Container with extra horizontal padding</p>
</Container>

Key Points

• Receives class from Astro.props and adds it with class:list
• Applies both default and external classes
• Supports Tailwind CSS or custom classes