Open In App

How to Implement Smooth Scrolling using Tailwind CSS ?

Smooth scrolling refers to the scrolling of a section of the webpage when the respective link is clicked. By default when we click a link it skips directly to that element using smooth scrolling the UX improves a lot. Tailwind CSS provides a utility class named scroll-smooth which applies the CSS property of scroll-behaviour with a value of smooth.

Approach

Example: implement smooth scrolling using Tailwind CSS.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Smooth Scrolling using Tailwind CSS</title>
</head>

<body class="font-serif text-white bg-green-500">
    <header class="flex flex-col items-center
                   gap-y-7 mt-5">
        <h1 class="text-6xl text-green-500 
                   bg-white rounded-full 
                   px-7 py-5 ">
          GeeksforGeeks
          </h1>
        <p class="text-4xl">
          Smooth Scrolling using Tailwind CSS
          </p>
        <ul class="flex gap-x-10 text-xl">
            <a href="#section1"
               class="text-green-700 bg-green-100 
                      rounded-md p-2 outline-none 
                      outline-offset-0 hover:text-white
                      hover:bg-green-700 hover:outline-2
                      hover:outline-white transition-al
                      l duration-300">
              Section 1
              </a>
            <a href="#section2"
               class="text-green-700 bg-green-100
                      rounded-md p-2 outline-none 
                      outline-offset-0 hover:text-white
                      hover:bg-green-700 hover:outline-2
                      hover:outline-white transition-all
                      duration-300">
              Section 2
              </a>
            <a href="#section3"
               class="text-green-700 bg-green-100 rounded-md
                      p-2 outline-none outline-offset-0 
                      hover:text-white hover:bg-green-700
                      hover:outline-2 hover:outline-white
                      transition-all duration-300">
              Section 3
              </a>
        </ul>
    </header>

    <main class="flex flex-col gap-y-10 p-10">
        <section id="section1" 
                 class="h-screen flex items-center 
                        justify-center text-7xl 
                        bg-blue-500 rounded-xl">
            <h1>Section 1</h1>
        </section>

        <section id="section2" class="h-screen flex items-center
                                      justify-center text-7xl
                                      bg-yellow-500 rounded-xl">
            <h1>Section 2</h1>
        </section>

        <section id="section3" class="h-screen flex items-center
                                      justify-center text-7xl  
                                      bg-purple-500 rounded-xl">
            <h1>Section 3</h1>
        </section>
    </main>
</body>

</html>

Output:

Output-Edited

Output

Article Tags :