# How to create a modal with ReactJS and style it with TailwindCSS.
# Introduction
ReactJS is a great library and If you combine it with TailwindCSS they become the best couple in the programming world :)
Today I will write about how to create a modal using ReactJS and style it with TailwindCSS.
> Caution: ReactJS version **^18.2.0** is used in this tutorial.
## Create A New React Project with TailwindCSS
To create a react project on your computer please make sure that **NPM** is already installed.
If you're ready, let's run the following command on your terminal or command prompt to create a react project called **my-project**.
```javascript
npx create-react-app my-project
```
Change your current directory into the project folder by using the following command.
```javascript
cd my-project
```
Since you're now in the project folder let's run the following command to include **TailwindCSS with other dependencies** into the project.
```javascript
npm install -D tailwindcss postcss autoprefixer
```
Once this command is completed and the **TailwindCSS** is installed then run the following command to create **configuration files for TailwindCSS and PostCSS**.
```javascript
npx tailwindcss init -p
```
If you've done everything correctly then you'll have the same following project structure.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660607624126/9Q18O0F8k.png align="left")
At this point, we have to make some configuration changes in the **tailwind.config.js** file to tell which files will have **TailwindCSS** classes on them.
Let's add the following configuration to the file.
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
Also we need to add **TailwindCSS directives** into the **src/index.css** file to include **TailwindCSS**.
```javascript
@tailwind base;
@tailwind components;
@tailwind utilities;
```
We're almost done with **TailwindCSS** integration, So just run the following command to run the application.
```javascript
npm run start
```
If everything goes right then you'll see some messages in terminal like below.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660718121070/8oVL1ksqs.png align="left")
If you go to one of the URLs provided to you (your URLs can be different than mine) then you'll see the following screen.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660718320121/cTQ_JEK5h.png align="left")
Congratulations 👏👏
### Create Modal Component
Our application is running and we are ready to create a lovely modal component.
So, let's create a file named **modal.jsx** in **src** folder.
After you created the file add the following piece of code into this file to convert it into the simple **react** component.
```javascript
export function Modal({children}) {
return (
{children}
);
}
```
Anywhere in our application, we can inject this component by calling it with the tag of **Modal**.
Let's add the following code into **App.js** to show the modal component whenever we click **Open Modal** button.
```javascript
import {Modal} from "./modal";
import {useState} from "react";
function App() {
const [open, setOpen] = useState(false);
return (
{open ?
This is my modal title
: null}
);
}
export default App;
```
Let's understand how does actually it works;
* First of all, we created a state **open** and we surrounded it with **useState** hook. So we can change the state of the **open** by calling **setState** method.
* We created a button and named it as **Open Modal**, whenever it's clicked we change the state of **open** to true.
* Whenever the state of the **open** becomes true, then we inject **Modal** component into our page.