How to use Tailwind CSS utilities directly In CSS

Using Custom CSS with Tailwind CSS Utility Classes

This approach involves using Tailwind CSS utility classes directly in your components to style and position the sidebar.
In this approach you not need to create separate CSS files, all the styling is done inline with the help of utility classes.
This approach provides maximum flexibility but requires more manual styling effort.

Example: This example shows the use of the above-explained approach.

JavaScript

//Sidebar.js
import React, { useState } from 'react';

const Sidebar = () => {
  // State to manage the open/close state of the sidebar
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="flex">
      {/* Sidebar */}
      <div
        // Conditional class based on isOpen 
        // state to control width and visibility
        className={`bg-gray-800 text-white 
                    fixed h-screen transition-all 
                    duration-300 z-10 
                    ${isOpen ? 'w-64' : 'w-0 overflow-hidden'
          }`}>
        {/* Sidebar content */}
        <div className="flex flex-col items-center">
          <div className="mt-4">
            <a href="#"
              className="text-white 
                          hover:text-gray-300">
              Home
            </a>
          </div>
          <div className="mt-4">
            <a href="#"
              className="text-white 
                          hover:text-gray-300">
              About
            </a>
          </div>
          {/* Add more sidebar items here */}
        </div>
      </div>
      {/* Main content */}
      <div className={`flex-1 p-4 
                        ${isOpen ? 'ml-64' : 'ml-0'}`}>
        {/* Button to toggle sidebar */}
        <div className="ml-auto">
          <button
            className="bg-blue-500 hover:bg-blue-700 
                       text-white font-bold py-2 px-4 rounded"
            onClick={() => setIsOpen(!isOpen)}>
            {/* Toggle icon based on isOpen state */}
            {isOpen ? (
              <svg
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12" />
              </svg>
            ) : (
              <svg
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h16m-7 6h7" />
              </svg>
            )}
          </button>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;

JavaScript

// pages/index.js

import React from 'react';
import Sidebar from './components/Sidebar';

const HomePage = () => {
  return (
    <div>
      {/* Sidebar component */}
      <Sidebar />
      {/* Main content of the homepage */}
      <div className="p-4">
        {/* Title */}
        <h1 className="text-3xl font-bold mb-4"></h1>
        {/* Additional content */}
        <p></p>
      </div>
    </div>
  );
};

export default HomePage;

Output:

How to Create a Sidebar in NextJS & Tailwind CSS?

In web development, sidebars are commonly used to organize navigation elements and provide quick access to different sections of a website. A sidebar is a vertical menu or panel that is typically positioned on the left or right side of the main content area.

Prerequisites:

Steps to Create NextJS Application:

Step 1: Create a nextJS application by using this command

npx create-next-app my-app

Step 2: Install Tailwind CSS by running this command

npm install tailwindcss

Step 3: Configure Tailwind CSS by creating a ‘tailwind.config.js’ file and adding any customization if needed.

Project Structure:

The updated dependencies in package.json file will look like.

"dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.3"
  },
  "devDependencies": {
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }

Table of Content