Offset-top only
DoctorSte opened this issue · comments
I need to offset my toaster, but I only want to offset it from the top.
Any way to do that through Tailwind classes? Would be great it that was a separate prop.
Found a workaround for this in this form:
<Toaster
position="top-right"
closeButton
visibleToasts={5}
toastOptions={{
unstyled: true,
classNames: {
toast:
"flex items-center rounded-xl w-full p-2 bg-indigo-600 border-2 border-indigo-500 text-base **mt-12** gap-0.5",
error: "bg-red-500 border-red-400 text-red-50",
success: "bg-green-600 border-green-500 text-green-50",
warning: "bg-yellow-400 border-yellow-300 text-yellow-900",
info: "bg-blue-700 border-blue-600 text-blue-50",
},
}}
/>
Would also be great to have breakpoints on this, so I can specify if I want that offset on all resolutions or just on some.
For instance, if I want to offset-top on lg and change that to offset-bottom on md and lower.
If the offset could work with tailwind classes as well it would solve it. Same for positioning.
eg.
offset="top-0 lg:top-20 bottom-20 lg:bottom-0"
position="bottom-center lg:top-right"
Was struggling with this and accidentally found it
toastOptions={{
style: {
top: 16,
},
}}
EDIT:
Actually not good for responsive, margin seems the best