Build a responsive website with reactjs and tailwindcss - Part 1
Tags: javascript, tutorial, codenewbie, react
Published: 2023-07-26 13:46:34

## **Introduction**
An easy way to create responsive websites without framework constraints is with tailwindcss. Tailwind CSS offers a solution with a wealth of utility classes, allowing for easy customization of buttons and elements, including responsiveness, dark mode, and hover states. It empowers creativity and eliminates the need for excessive CSS file modifications.

In this how to build a responsive website with reactjs and tailwindcss - part 1 tutorial, I will take you through the prerequisites, installation and every other process needed to build a responsive website. This part 1 tutorial will take you through building a responsive navigation bar. The part 2 of this tutorial will continue to complete the project. I will include the link to the Github repository and part 2 of this tutorial in the links section. 
Enjoy the process!!!   

## **Prerequisite**
- NodeJS — https://nodejs.org/en/download
- Visual studio code — https://code.visualstudio.com/
- Tailwind CSS - https://tailwindcss.com/docs/guides/create-react-app
- ReactJS - https://legacy.reactjs.org/docs/create-a-new-react-app.html

## **Getting Started**
Go to the official Node.js website by following the link above and download the LTS (Long Term Support) version for Windows. Choose the appropriate installer (32-bit or 64-bit) based on your system. Proceed to install the node package. Or you can open command line and run the following command:

`npm install -g npm`

Download and install your preferred code editor. But if you do not have one, download and install visual studio code by following the link I provided above.

Using your preferred location, create the folder for your application. I will create a folder by name 'newbie.' Open command line and go inside the above directory by using terminal. We will create a new project by following the the command below:

`npx create-react-app website`

We will move into our new project 'website' by entering the following command.

`cd website`

We will install some packages. Run the following command:

`npm i react-icons`

`npm i @heroicons/react@1.0.6`

Run the following command to install the command to install tailwindcss package in our project 'website':

`npm install -D tailwindcss`

Proceed to initialize tailwind in the 'website' project by entering the following command:

`npx tailwindcss init`

Open the 'website' project in your preferred editor and copy and paste the following code in the tailwind.config.js file to replace everything in there:

```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    screens: {
      sm: '640px',
      // => @media (min-width: 640px) { ... }

      md: '768px',
      // => @media (min-width: 768px) { ... }

      lg: '1024px',
      // => @media (min-width: 1024px) { ... }

      xl: '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },
  },
  variants: {},
  plugins: [],
}
```

Open index.css file and update it with the following code to replace what is i there:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  li {
    @apply p-4
  }

  button {
    @apply text-white border bg-blue-600 border-blue-600
    hover:bg-transparent hover:text-blue-600 rounded-md
  }
}
```

We will delete App.css, App.test.js, logo.svg, reportWebVitals.js and setupTest.js in the src folder.

We will update the index.js file in the src folder with the following code:

```
import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';

 const root = 
 ReactDOM.createRoot(document.getElementById('root'));
 root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

Update App.js file in the src folder with the following code:

```
import React from "react";

 function App() {
  return (
    <div>
      app
    </div>
  );
 }

export default App;
```

In visual studio code, open terminal and run the following command:

`npm start`

You can now open your preferred browser and enter the url http://localhost:3000/. This will show a white page with the name 'app' at the top left corner. You should get the following result.

![App image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nycrzgfyvkmxevej2tv.png)

Create a folder by name 'components' inside the src folder. This 'components' folder will contain our navigation file. Now proceed to create a 'Navigation.js' file inside the 'components' folder.

In 'Navigation.js' file, copy and paste the following code in it:

```
import React, {useState} from 'react';

function Navigation() {
  return (
    <div>Navigation</div>
  )
}

export default Navigation
```

We will edit the 'Navigation.js' file little by little to complete the navigation bar. 

Import these icons in 'Navigation.js' file by copying and pasting the following code:

```
import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { FaUserAlt } from 'react-icons/fa';
```

We will set the background color, height and some properties for our navigation bar. Copy and paste the following code:

```
...
//Navigation bar on large screen
<div className='w-screen bg-gray-100 h-[70px] z-10 fixed drop-shadow-lg'>

</div>

...
```

We will add some code to update our navigation bar on large screens. Copy and paste the following code:

```
...

<div className='px-2 flex justify-between items-center w-full h-full'>
      <div className='flex items-center'>
      <h1 className='text-3xl font-bold text-black mr-4 sm:text-4xl'>Websites.</h1>
      <ul className='hidden text-black md:flex'>
        <li className='cursor-pointer hover:bg-white hover:text-green-600 hover:rounded-lg'>
            Home
        </li>
        <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
            About Us
        </li>
        <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
            Contact Us
        </li>
        <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
            Services
        </li>
      </ul>
    </div>
        <div className='hidden md:flex pr-4'>
         
            <a
            className="flex text-center cursor-pointer items-center mx-4 text-black hover:text-green-600"
            type="submit"
            >
            <FaSignInAlt className='lg:w-5 lg:h-5 mx-2' />
            <span className="text-sm font-medium">
            Login
            </span>
            </a>

            <a
            className="block cursor-pointer shrink-0 rounded-lg bg-white p-2.5 border border-gray-100 shadow-sm hover:bg-transparent hover:text-green-600 hover:border hover:border-green-600"
          >
            <span className="sr-only">Account</span>
            <FaUserAlt className='lg:w-5 lg:h-5' />
          </a>
    
       
        </div>
        </div>

...

```

We now have to write some states and function. Copy and paste the code below:

```
const [nav, setNav] = useState(false)
    
const handleClick = () => setNav(!nav)

    const handleClose = () => {
      setNav(false);
    };
```

We write the following code for our navigation on small screens:

```

...

//Navigation on small screens
<ul className={!nav ? 'hidden' : 'absolute bg-zinc-200 w-full px-8'}>
            <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
              Home
            </li>

            <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
              About Us
            </li>

            <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
              Contact Us
            </li>

            <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
              Services
            </li>
          </ul>

...

```

We include the following code to ensure that the menu and close icons work on mobile small screens:

```
...

<div className='md:hidden mr-4' onClick={handleClick}>
            {!nav ? <MenuIcon className='w-5 text-black' /> : <div className='flex'>
            
            <a
            className="flex text-center cursor-pointer items-center mx-4 text-black hover:text-green-600"
            type="submit"
            >
            <FaSignInAlt className='lg:w-5 lg:h-5 mx-2' />
            <span className="text-sm font-medium">
            Login
            </span>
            </a>

            <a
            className="block cursor-pointer shrink-0 rounded-lg bg-white mr-4 p-2.5 border border-gray-100 shadow-sm hover:bg-transparent hover:text-green-600 hover:border hover:border-green-600"
          >
            <span className="sr-only">Account</span>
            <FaUserAlt className='lg:w-5 lg:h-5' />
          </a>
                <XIcon className='w-5 text-black' /> 
            </div>}
          
        </div>
...

```

The Navigation.js file should look like the code below:

```
import React, {useState} from 'react'

import { MenuIcon, XIcon } from '@heroicons/react/outline';
import { FaUserAlt, FaSignInAlt } from 'react-icons/fa';


function Navigation() {
    const [nav, setNav] = useState(false)
    
    const handleClick = () => setNav(!nav)

    const handleClose = () => {
      setNav(false);
    };


  return (
    // Navigation bar on large screen
    <div className='w-screen bg-gray-100 h-[70px] z-10 fixed drop-shadow-lg'>
    
    <div className='px-2 flex justify-between items-center w-full h-full'>
      <div className='flex items-center'>
      <h1 className='text-3xl font-bold text-black mr-4 sm:text-4xl'>Websites.</h1>
      <ul className='hidden text-black md:flex'>
        <li className='cursor-pointer hover:bg-white hover:text-green-600 hover:rounded-lg'>
            Home
        </li>
        <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
            About Us
        </li>
        <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
            Contact Us
        </li>
        <li className='cursor-pointer relative group hover:bg-white hover:text-green-600 hover:rounded-lg'>
            Services
        </li>
      </ul>
    </div>
        <div className='hidden md:flex pr-4'>
         
            <a
            className="flex text-center cursor-pointer items-center mx-4 text-black hover:text-green-600"
            type="submit"
            >
            <FaSignInAlt className='lg:w-5 lg:h-5 mx-2' />
            <span className="text-sm font-medium">
            Login
            </span>
            </a>

            <a
            className="block cursor-pointer shrink-0 rounded-lg bg-white p-2.5 border border-gray-100 shadow-sm hover:bg-transparent hover:text-green-600 hover:border hover:border-green-600"
          >
            <span className="sr-only">Account</span>
            <FaUserAlt className='lg:w-5 lg:h-5' />
          </a>

        </div>

        <div className='md:hidden mr-4' onClick={handleClick}>
            {!nav ? <MenuIcon className='w-5 text-black' /> : <div className='flex'>
            
            <a
            className="flex text-center cursor-pointer items-center mx-4 text-black hover:text-green-600"
            type="submit"
            >
            <FaSignInAlt className='lg:w-5 lg:h-5 mx-2' />
            <span className="text-sm font-medium">
            Login
            </span>
            </a>

            <a
            className="block cursor-pointer shrink-0 rounded-lg bg-white mr-4 p-2.5 border border-gray-100 shadow-sm hover:bg-transparent hover:text-green-600 hover:border hover:border-green-600"
          >
            <span className="sr-only">Account</span>
            <FaUserAlt className='lg:w-5 lg:h-5' />
          </a>
                <XIcon className='w-5 text-black' /> 
            </div>}
          
        </div>

        </div>


        {/* Navigation on small screens */}
        <ul className={!nav ? 'hidden' : 'absolute bg-zinc-200 w-full px-8'}>
            <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
              Home
            </li>

            <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
              About Us
            </li>

            <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
              Contact Us
            </li>

            <li onClick={handleClose} className='border-b-2 border-zinc-300 w-full'>
              Services
            </li>
          </ul>

    </div>
  )
}

export default Navigation
```

Now we can go back to App.js file and import the Navigation.js file to see the results in our browser. Copy and paste the following code:

```
import Navigation from "./components/Navigation";
```

And then:

```
<Navigation />
```


App.js file should now look like the below code:

```
import React from "react";
import Navigation from "./components/Navigation";

function App() {
  return (
    <div>
     < Navigation />
    </div>
  );
}

export default App;
```

The project should now look like this in the browser on large screens.

![Large screen image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpvmbg4d2fmb6j7ftyqn.png)

And like this on small screens.

![Small screen image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mw53aqt7vxyn5gpwl56.png)

We come to the end of our part 1 of building a responsive website with a reactjs and tailwind css. Will come your way soon on completing the project.

Hurray!!!

## Links
Link to websites Github repository - https://github.com/kwakyebrilliant/Websites
Link to part 2 of this tutorial - https://medium.com/@kwakyebrilliant/build-a-responsive-website-with-reactjs-and-tailwindcss-part-2-c363e54b9f4d