DEV Community

Cover image for Build a responsive website with reactjs and tailwindcss - Part 1
a_moah__
a_moah__

Posted on • Updated on

Build a responsive website with reactjs and tailwindcss - Part 1

#javascript #tutorial #codenewbie #react

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

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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>

...
Enter fullscreen mode Exit fullscreen mode

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>

...
Enter fullscreen mode Exit fullscreen mode

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);
    };
Enter fullscreen mode Exit fullscreen mode

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>

...
Enter fullscreen mode Exit fullscreen mode

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>
...
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

And then:

<Navigation />
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Large screen image

And like this on small screens.

Small screen image

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

Top comments (0)

Read next

amatisse profile image

Step-by-Step Guide to Integrate TypeScript into a Node.js Project 🚀🛠️

AMatisse -

cylop profile image

Introducing the Enhanced @nipe-solutions/react-spring-bottom-sheet: Now Supporting React 18 and XState v5

Nicholas Petrasek -

ellis22 profile image

ES6 Spread Operator: Unleashing the Power of Modern JavaScript

Ellis -

thangaganapathy profile image

How to Compare Same Contents but Different Ordered Arrays in JavaScript?

Thanga Ganapathy -