Component styling

EventCatalog uses Tailwind. This means your custom components can be styled with tailwind.

/components/my-component.astro

---
# Import data from your eventcatalog.config.js file
import config from "@config"
# Access passed-in component props, like `<MyComponent title="Hello, World" />`
const { subtitle } = Astro.props;
---

<main class="flex justify-center">
    <span class="block bg-red-500">This catalog belongs to the company:{config.organizationName}</span>
    <span class="block bg-yellow-500">Data given to this component {subtitle}</span>
</main>

Read the full astro guide here.