svelte-daisy-toast

1. Install

bun add svelte-daisy-toast

2. Add to Tailwind config

Modify your tailwind.config.js to add svelte-daisy-toast, otherwise Tailwind will tree-shake the "unused" styles!

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './src/**/*.{html,js,svelte,ts}',
+       './node_modules/svelte-daisy-toast/dist/**/*.{js,svelte}'
    ],
    theme: {
        extend: {}
    },
    plugins: [require('daisyui')]
};

3. Add to layout

<!-- +layout.svelte -->
<script>
    import Toast from 'svelte-daisy-toast';
</script>

<Toast position="bottom-center" />
<slot />

4. Use

<!-- +page.svelte -->
<script>
    import { toast } from 'svelte-daisy-toast';

    function boop() {
        toast({
            title: 'Boop',
            message: 'Hello Svelte!',
            duration: 5000,
            type: 'success'
        });
    }
</script>

<button class="btn" on:click={boop}>I'm a button</button>