See all posts

How to create a React Modal using Tailwind CSS.

By Amarachi Iheanacho - Technical Content Writer at Windframe

How to create a React Modal using Tailwind CSS.

React Modals have solidified their presence on the modern web page, they provide new information asides from the information presented to the user on the main page without any need to refresh.

With their presence providing quality user experience, by making users focus on particular information, usually deemed important by the creators of the website, there is a high chance that you have seen or experienced a modal.

Table of Content

What is a React Modal

A React Modal is a component, a web element that displays information over the entire web page, which in turn disables the web page. When a modal is displayed, it usually places a dark overlay over the rest of the webpage excluding the overlay, this allows us to focus on the information the modal is passing through or focus on performing the task or completing the interaction the modal is requesting for.

A modal window is used for user interaction and does not allow users to interact with the rest of the webpage until it is closed.

Prerequisities

To make the most of this article, you must have the following:

  • A basic understanding of HTML.
  • A basic understanding of CSS.
  • A basic understanding of React.
  • Node and its package manager, npm, Run the command node -v && npm -v to verify we have them installed, or install them from here.
  • Alternatively, we can use another package manager, Yarn.

What is Tailwind CSS

TailwindCSS refers to itself as a utility-first CSS framework, which has been designed to help ease the development process of creating web applications by creating custom-made styles that are available to developers via special classes, which are then added to the elements.

Getting Started with React and Tailwind CSS

To create a new react project, we go to our terminal, cd in the directory we want, and then run this command npx create-react-app project-name.

Bash
1cd Documents
2npx create-react-app project-name

Installing Tailwind CSS

To have tailwind CSS available in your project, cd into the project you created earlier

Bash
1cd project-name

next run

Bash
1npm install -D tailwindcss postcss autoprefixer
2npx tailwindcss init -p

Configuring your templates path

To configure your paths go to your tailwind.config.js, and edit your module.exports object, add the paths to your template files in your content array.

JS
1module.exports = {
2  content: ['./src/**/*.{js,jsx,ts,tsx}'],
3  theme: {
4    extend: {},
5  },
6  plugins: [],
7};

Next add the Tailwind directives to your CSS

Add the tailwind directives in your ./src/index.css file.

CSS
1@tailwind base;
2@tailwind components;
3@tailwind utilities;

After this, we run our project

Bash
1npm run start

You should see this in your browser when you go to http://localhost:3000/.

React Bootstrap Modal

Tailwind modal: Creating your Tailwind CSS Modal

To create a tailwindcss modal using the template in the docs, we need to install a headlessui in react to use and build our Tailwind modal. We choose headlesssui because it also has support for tailwind css. To do that, we run the following command :

Bash
1// npm
2

3npm install @headlessui/react

or

Bash
1// Yarn
2

3yarn add @headlessui/react

Building Your React Modal

Creating a Modal Component

Here we can create a modal component that houses the Tailwind css modal functionality. The headless ui component helps us add some functionality and beautiful ui to our modal.

Simple Model

JSX
1/* This example requires Tailwind CSS v2.0+ */
2import { Fragment, useRef, useState } from 'react';
3import { Dialog, Transition } from '@headlessui/react';
4import { ExclamationIcon } from '@heroicons/react/outline';
5

6export default function Example() {
7  const [open, setOpen] = useState(true);
8

9  const cancelButtonRef = useRef(null);
10

11  return (
12    <Transition.Root show={open} as={Fragment}>
13      <Dialog
14        as="div"
15        className="fixed z-10 inset-0 overflow-y-auto"
16        initialFocus={cancelButtonRef}
17        onClose={setOpen}
18      >
19        <div
20          className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block
21         sm:p-0"
22        >
23          <Transition.Child
24            as={Fragment}
25            enter="ease-out duration-300"
26            enterFrom="opacity-0"
27            enterTo="opacity-100"
28            leave="ease-in duration-200"
29            leaveFrom="opacity-100"
30            leaveTo="opacity-0"
31          >
32            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
33          </Transition.Child>
34

35          {/* This element is to trick the browser into centering the modal contents. */}
36          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
37            &#8203;
38          </span>
39          <Transition.Child
40            as={Fragment}
41            enter="ease-out duration-300"
42            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
43            enterTo="opacity-100 translate-y-0 sm:scale-100"
44            leave="ease-in duration-200"
45            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
46            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
47          >
48            <div
49              className="inline-block align-bottom bg-white rounded-lg
50               text-left 
51            overflow-hidden shadow-xl 
52            transform transition-all 
53            sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
54            >
55              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
56                <div className="sm:flex sm:items-start">
57                  <div
58                    className="mx-auto flex-shrink-0 flex items-center
59                   justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0
60                    sm:h-10 sm:w-10"
61                  >
62                    <ExclamationIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
63                  </div>
64                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
65                    <Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
66                      Deactivate account
67                    </Dialog.Title>
68                    <div className="mt-2">
69                      <p className="text-sm text-gray-500">
70                        Are you sure you want to deactivate your account? All of your data will be
71                        permanently removed. This action cannot be undone.
72                      </p>
73                    </div>
74                  </div>
75                </div>
76              </div>
77              <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
78                <button
79                  type="button"
80                  className="w-full inline-flex justify-center rounded-md
81                   border border-transparent shadow-sm px-4 py-2 bg-red-600
82                    text-base font-medium text-white hover:bg-red-700 
83                    focus:outline-none focus:ring-2 focus:ring-offset-2
84                     focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
85                  onClick={() => setOpen(false)}
86                >
87                  Deactivate
88                </button>
89                <button
90                  type="button"
91                  className="mt-3 w-full inline-flex justify-center
92                  rounded-md border border-gray-300 shadow-sm px-4 py-2
93                   bg-white text-base font-medium text-gray-700
94                    hover:bg-gray-50 focus:outline-none focus:ring-2
95                     focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0
96                      sm:ml-3 sm:w-auto sm:text-sm"
97                  onClick={() => setOpen(false)}
98                  ref={cancelButtonRef}
99                >
100                  Cancel
101                </button>
102              </div>
103            </div>
104          </Transition.Child>
105        </div>
106      </Dialog>
107    </Transition.Root>
108  );
109}

Default React Bootstrap Modal

In the piece of code above we used the useState hook from react to create a piece of state that will be used to control whether or not the modal is opened. We use the Transition component to animate in and out the modal element and the Dialog component to communicate with the user, this component holds the information we want to pass to the user.

Conclusion

In this comprehensive guide, we've explored the process of creating a React Modal using Tailwind CSS. By combining the power of React's component-based architecture and the utility-first approach of Tailwind CSS, you can craft stunning modals that enhance user experience and engagement on your web applications.

Resources

You may find the following resources useful:

Back to blog posts

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe