Easy React Modal with Tailwindcss 😎
Tags: react, tailwindcss, tutorial
Published: 2023-05-13 08:26:57

Modals are essential nowdays and i've seen alot of ways to create them, Today i wanted to create my first post here using only reactjs & Tailwindcss.

Here is what we are going to build

![Modal preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dguxp507x12qdvb3b8u1.gif)



> Let's go

**Create React Project**
First, Create a simple react project using create-react-app cli

```
npx  Create-react-app  react-modal
```

```
import logo from './logo.svg';
import './App.css';

function App() {
  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>
      </header>
    </div>
  );
}

export default App;
```

Lets do some cleaning

```
import "./App.css";

function App() {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

export default App;
```

**Lets add Tailwindcss**
as it shows on [Tailwindcss](https://tailwindcss.com/docs/guides/create-react-app) doc 

```
npm install -D tailwindcss
```

```
npx tailwindcss init
```

**Configure your template**

```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

and Add Tailwind directives to your CSS

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**We are done lets start our app**

```
npm run start
```

As you can see everything works perfectly now 👍

```
import "./App.css";

function App() {
  return (
    <div>
      <h1 className="text-center text-2xl text-red-500">Hello world</h1>
    </div>
  );
}

export default App;
```
In this tutorial we will be needing two things button & the modal it self

so lets create them this way

![Project dir](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qg8zqaa60f110yuv0lxa.png)

```
import "./App.css";
import ReactModal from "./ReactModal";

function App() {
  return (
    <div className="flex flex-col justify-center items-center h-screen w-screen">
      <ReactModal/>
      <button className="py-2 px-4 border rounded-md text-blue-100 bg-blue-400 hover:bg-blue-500 hover:text-white duration-75">
        Click here
      </button>
    </div>
  );
}

export default App;
```

you can customize the button as you like 😋

**now we add a useState to control the modal**

```
const [visible, setIsVisible] = useState(false);
```

go to ReactModal component and create it

```
import React from "react";

const ReactModal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div
      onClick={onClose}
      className="fixed z-50 bg-black bg-opacity-40 top-0 bottom-0 left-0 right-0 w-full h-full flex justify-center items-center"
    >
      <div
        onClick={(e) => {
          e.stopPropagation();
        }}
        className="bg-white p-2 lg:p-5 rounded-xl shadow-md"
      >
        <div onClick={onClose} className="text-2xl cursor-pointer w-fit h-fit">
          X
        </div>
        <div className=" my-2">This is my Awsome Modal 😎</div>
      </div>
    </div>
  );
};

export default ReactModal;
```

We pass isOpen & onClose to the parent so we use them on the useState to control the Modal visibility

notice that i added _onClick_

on the main div so you dismiss the modal when you click anywhere

```
onClick={onClose}
```

and _stopPropagation_ on the inner div so it wont dismiss when you click on the inner modal

```
onClick={(e) => {e.stopPropagation();}}
```
ofcourse you can change the ❌ to a fancy SVG icon i just wanted to make it look nifty using the emoji 😋

**Finally in the parent div **

```
import { useState } from "react";
import "./App.css";
import ReactModal from "./ReactModal";

function App() {
  const [visible, setIsVisible] = useState(false);

  return (
    <div className="flex flex-col justify-center items-center h-screen w-screen">
      <ReactModal isOpen={visible} onClose={() => setIsVisible(false)} />
      <button
        onClick={() => setIsVisible(true)}
        className="py-2 px-4 border rounded-md text-blue-100 bg-blue-400 hover:bg-blue-500 hover:text-white duration-75"
      >
        Click here
      </button>
    </div>
  );
}

export default App;
```

and now you have a customized fast easy and cool looking modal without using any packages... ofcourse you can do that without Tailwindcss too

![Modal preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dguxp507x12qdvb3b8u1.gif)

Thanks for reading! If you think other people should read this post and use this project, tweet, and share the post.

Remember to follow me, so you can get notified about my future posts.