How to Use Toastify in React with Tailwind CSS

In this tutorial, we'll see how to use toastify in your React project using Tailwind CSS. Before you begin, ensure your project has React, and Tailwind CSS installed and configured.

Install & Setup Tailwind CSS + React 18+ Typescript + Vite

Run below to install toastify in react app.

With npm:

npm install --save react-toastify

With yarn:

yarn add react-toastify

Make a basic toast feature in React using Tailwind CSS.

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';

import 'react-toastify/dist/ReactToastify.css';
// minified version is also included
// import 'react-toastify/dist/ReactToastify.min.css';

export default function ToastDemo(){
  const notify = () => toast("Wow so easy !");

  return (
    <div className='flex justify-center h-screen items-center'>
      <button onClick={notify} className='px-2 py-2 bg-blue-500 text-white'>Notify !</button>
      <ToastContainer />
    </div>
  );
}

react tailwind toastify

You can also change Toast notification position and color.

Toast Container

<ToastContainer
position="top-left"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
transition: Bounce,
/>

Toast Emitter

toast.info('🦄 Wow so easy!', {
position: "top-left",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
transition: Bounce,
});

Check more info about position https://fkhadra.github.io/react-toastify/introduction