Sleek Toast Notification Library Styled With TailwindCSS – SimpleToast

Preview:

Description:

SimpleToast is a handy JavaScript notification library for creating customizable toast messages in your web projects.

It comes with preset styles for common toast types like success, error, warning, and info. The toasts are styled using Tailwind CSS utility classes to achieve a clean, minimalist look.

How to use it:

1. Download and load the SimpleToast library in your document which has TailwindCSS installed.

<script src="/path/to/SimpleToast.js"></script>
<script src="https://cdn.tailwindcss.com/"></script>

2. Initialize SimpleToast by calling toastInit();

toastInit();

3. If you’d rather skip the initialization step, you can add the following markup to any part of your page. It’s recommended to place this either at the top or bottom.

<div class="absolute bottom-0 right-0"></div>

4. Here’s how you can create various toast messages:

// into
Toast: `toast('Toast Title', 'Toast Message', toastStyles.info);`
// warning
toast('Toast Title', 'Toast Message', toastStyles.warn);
// Error
toast('Toast Title', 'Toast Message', toastStyles.error);
// Success
toast('Toast Title', 'Toast Message', toastStyles.success);

5. Override the default timeout.

// auto-dismiss after 10 seconds
toast('Toast Title', 'Toast Message', toastStyles.success, 10);