Question: Styling Using TailwindCSS

[nickpoulos]

Hello, I was hoping to use this library but to re-style the component using a class based approach, a la TailwindCSS.

From the docs I was unsure how to go about this, it seems like only CSS variables or Svelte style block is supported.

Is it possible to add custom classes to various pieces of this toast component?

Thanks!

[zerodevx]

Hey, you can try applying tailwind classes with user-defined classes. The classes are applied to each toast item. YMMV though, because of CSS specificity.

Generally I'll recommend using the exposed CSS vars and/or the Svelte :global modifier.

<div class="wrap">
  <SvelteToast />
</div>

<style lang="postcss">
.wrap :global(.toastItem) {
  --toastPadding: 1rem;
  ...
  @apply text-xs font-bold ...;
}
</style>