How to Implement Smooth Scrolling using Tailwind CSS ?

Last Updated : 09 Apr, 2024

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

Create a layout in the HTML file, Use the script tag with the src value of a CDN link to use Tailwind CSS.
Add a scroll-smooth class name to the HTML tag. Smooth scrolling functionality is implemented using anchor tags <a> with href attributes pointing to specific sections (#section1, #section2, #section3) within the page.
The section must have an id which will used in the anchor tag for the href value.
Provide appropriate height to each section such that it overflows the page and provides us with a scroll bar.

Example: implement smooth scrolling using Tailwind CSS.

HTML

<!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>