Building a Notification System with React-Toastify + Tailwind in React JS?
Let’s create a Toasts (aka Notification System) in React + Tailwind!
Building a Notification System with React-Toastify + Tailwind in React JS?
Photography By Philip Oroni
Let’s create a Toasts (aka Notification System) in React + Tailwind!
Are you ready for a new tutorial!? I’m a versatile human not some kind of robot or ai.
I figured well, “why not” let’s give React JS a try.
To my likings, React does a few things great!
Hence, my excitement to give React JS another go-around since leaving it well behind in 2016.
How to install React JS on my own machine?
Let’s get started with the de-facto choice of all React JS projects.
To spin up a minimal project, we first need to run the following command.
I’ll name this project “Tailwind-toast” being that it is a sample. You are free to name the project anything you’d prefer.
npx create-react-app tailwind-toastYou can find some more helpful insights about javascript in general via my older articles about ReactJS .
Here you will see, a new REACT project has been setup and created.
Before we move on, we still need to setup Tailwind CSS.
We plan to use a CDN to setup our tailwind inside the react app.
Next, You will need to Locate the root of the new reactjs project!
./public/index.htmlAnd append a script tag with the CDN Tailwind to the head of the index.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>How to install React Toastify into my project?
You first need to bring in a lib, which is named, “React-Toastify”.
This library has some amazing features like customizing toast messages and much more.
Go ahead and run the following command.
npm install --save react-toastifyNow you should have all the packages you need to get a Toast to run!
How To import React Toastify CSS?
At this point in the tutorial, you have all the packages but you will still require some minimal css to get React-Toastify to work as expected.
Open your text editor and make a few changes to the App.js file. You will find this file automatically generated and inside the directory named src.
Next, you will want to include these two lines of code.
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';Perfect! Now we can use the ToastContainer and the toast to trigger notifications on a button click.
Let’s define a button inside our new reactjs project. Starting in the same file as before App.js, we can setup a new button with a constant variable ready for any onClick events.
const notify = () => {};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<button onClick={notify}>Notify !</button>
</header>
</div>
);Awesome! Next is adding Tailwind to the button. Notice that in ReactJS we need to use className instead of class on the button. The tailwind CSS styles are very straightforward, here we need some font-bold and a background color.
<button className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded m-5 text-base" onClick={notify}>Notify !</button>This is starting to come together! Let’s get the Toast working now! Add the following line to the App.js file.
const notify = () => toast("Wow so easy !");We previously imported a Toast and ToastContainer before from inside the App.js file.
Next we must sure, we can get our toast setup to be looking good and powered by only tailwind CSS!
How about we add-in a contextClass as a constant and let tailwind do the special magic 🪄
const contextClass = {
success: "bg-blue-500",
error: "bg-red-600",
info: "bg-gray-600",
warning: "bg-orange-400",
default: "bg-indigo-600",
dark: "bg-white-600 font-gray-300",
};Now for the final part…. We must setup the ToastContainer.
Here is where all the magic — starts and finishes, so get ready!
<ToastContainer
toastClassName={(context) =>
contextClass[context?.type || "default"] +
" relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"
}
bodyClassName={() => "text-sm font-white font-med block p-3"}
position="top-left"
autoClose={3000}
icon={({ type }) => {
if (type === "success") return "👻";
if (type === "error") return "🚨";
else return "ℹ️";
}}
/>We are defining a ToastClassName container and passing the context we made earlier. Then we apply a few Tailwind Styles to make sure our ToastContainer is looking great.
Next we set the position of the notification to be Top and Left.
Perfect! This should be all set, but we want to update the icons in React-Toastify.
Normally, making Style changes to an icon within a React Lib can be difficult, however, react-toastify js has a property specifically for icon.
Oh No! …it seems like our toast notification system is not working as expected.
How to trigger a React-Toastify with your own Custom Tailwind Styles?
After following the tutorial up all the way up until this point, you may have realized the pop-up notification we are building is not using the correct styles.
The reason is we need to actively tell our notification system in react to use the correct context when triggered.
Let’s go back to the start of the final App.js to understand exactly why our react-toastify notification system is not triggering custom tailwind styles.
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
const contextClass = {
success: "bg-blue-500",
error: "bg-red-600",
info: "bg-gray-600",
warning: "bg-orange-400",
default: "bg-indigo-600",
dark: "bg-white-600 font-gray-300",
};
function App() {
const notify = () => toast("Wow so easy !");
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<button className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded m-5 text-base" onClick={notify}>Notify !</button>
<ToastContainer
toastClassName={(context) =>
contextClass[context?.type || "default"] +
" relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"
}
bodyClassName={() => "text-sm font-white font-med block p-3"}
position="top-left"
autoClose={3000}
icon={({ type }) => {
if (type === "success") return "👻";
if (type === "error") return "🚨";
else return "ℹ️";
}}
/>
</header>
</div>
);
}Did you notice what is incorrect? Well… We don’t have a specific context being check or validated for our Tailwind CSS styles to override the default react-toastify styles.
How to override React-Toastify Styles and fix Tailwind Styles Not Showing Up?
We need to manually override the React-Toastify settings by redefining the type available to the notification. For instance, if we wanted to call a notification of success.
The successful notification in the React-Toastify Styles need to be chosen and the styles in tailwind which we created earlier need to take place.
We may also want to customize the notification a bit more like changing the styles of the progress-bar.
On each notification, you should see an react-toastify option to update the progressStyle.
Let’s set that to a default color.
const notify = () => toast("Wow so easy !", { type: "success", progressStyle: { background: '#E8DFD0' } });You should now see the correct styles. Tailwind and React JS is powerful. You can mix and mingle your CSS and JS to your hearts content.
Congratulations for making it this far in the tutorial!
Here is the final code for anyone wanting to take it for a spin.
Our Final Thoughts on ReactJS + Libs
You’ve accomplished so much by completing the tutorial.
It’s amazing to know you can do so much with so little configuration unlike in Angular.
I think ReactJS is a great tool but with every tool, problems are still common.
A common problem I’ve experienced in react is their backwards compatibility support.
Feel free to prove me wrong but…
React’s methodology is always focusing on the bleeding edge of technology which means they don’t look back.
I personally would not like to restart my project multiple times because something broke in a year from when I completed it.
P.S. If you’re a fan of Medium as much as we are, consider supporting me and the thousands of other writers on Ko-Fi.
It only costs $8 for a coffee, and it supports us writers. Thank you, Greatly.
Happy Programming!! — We really don’t support AI killing jobs 😵, so be nice.
👋 If you find this helpful, please click the clap 👏 button below a few times to show your support for the author 👇
🚀Join FAUN Developer Community & Get Similar Stories in your Inbox Each Week
메타데이터
- post_id
- b18bd5bae51b
- slug
- building-a-notification-system-with-react-toastify-tailwind-in-react-js-b18bd5bae51b
- url
- https://faun.pub/building-a-notification-system-with-react-toastify-tailwind-in-react-js-b18bd5bae51b
- canonical_url
- https://faun.pub/building-a-notification-system-with-react-toastify-tailwind-in-react-js-b18bd5bae51b
- author_url
- https://medium.com/@srdbranding
- status
- ok
- fetched_at
- 2026-07-22 18:57:33
