zerodevx/svelte-toast

Question: Styling Using TailwindCSS

nickpoulos opened this issue · 1 comments

nickpoulos commented

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 commented

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>
  • 👍1