Toast - customize theme and position

[abotalebie]

Is there any way for customize toast theme and position?

[acidjazz]

@abotalebie there is nothing particular other than overriding the CSS classes yourself - you can see the defaults here https://github.com/fumeapp/tailvue/blob/main/src/toast.ts#L6-L14

[abotalebie]

My question is exactly the same.
How can I override CSS classes?

[acidjazz]

well one idea: i set an id to the container element all of the toasts fire from here - maybe you can do something like this:

#toasts {
  @apply tailwind classes here;
}

or maybe go after the children:

#toasts > div {
  @apply tailwind classes here;
}

please report back if you try this and it works - be great for the docs

[abotalebie]

Tanks, Yes It works

I applied the changes with the following codes for move toasts to bottom of page and apply RTL direction

#toasts {
  align-self: end;

  .mr-4 {
    margin-right: 0;
    margin-left: 1rem;
  }
  .ml-4 {
    margin-right: 1rem;
    margin-left: 0;
  }
  .ml-3 {
    margin-right: 0;
    margin-left: 0.75rem;
  }
}

But it would be better if there was a simple way to customize toasts position, classes and icons.
Also, support for right-to-left mode is required.

[acidjazz]

Glad to hear this works - ill update the readme and think about a way to add official support when i get time - otherwise feel free to submit a PR