How to Implement Smooth Scrolling using Tailwind CSS ?

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>

Output:

Output-Edited — Output

How to Implement Smooth Scrolling using Tailwind CSS ?

R

rohan_paul

Improve

Article Tags :

Similar Reads

How to Implement Reveal on Scroll in React using Tailwind CSS ?

In React, the reveal on the scroll is a technique, where elements on a page gradually appear or animate as the user scrolls down. Prerequisites:NPM & Node.jsReact JSTailwind CSSTo implement reveal in scroll in react using Tailwind CSS we have these methods: Table of Content Using the Intersectio

How to Change Style of Scrollbar using Tailwind CSS?

By default, Tailwind CSS does not include built-in utilities for styling scrollbars. However, you can customize the appearance of scrollbars using traditional CSS in combination with Tailwind's utility classes. This is achieved by using the scrollbar-* classes to customize aspects like scrollbar wid

How to Modify Hover Effect using Tailwind CSS ?

In Tailwind CSS, the term "modify hover" refers to changing the styles that are applied to an element when it is hovered over. With Tailwind CSS "hover" variation, you can quickly apply particular utility classes and custom classes to control how components appear when you hover over them, giving yo

How To Control The Scroll Snap in Tailwind CSS?

To simplify scroll snap effects, a utility-first CSS framework, Tailwind CSS, helps with some utilities. When scroll snapping is in place, users are guided through the content smoothly by snapping elements into position as they scroll down the page, resulting in a more polished and responsive experi

How To Use Third Party Plugins In Tailwind CSS?

Tailwind is highly customizable. It can extend functionality through third-party plugins, these plugins add additional features or utilities, such as an improved visual style or improved typography, using third-party plugins in Tailwind CSS allows you to add advanced UI capabilities with just a litt

How to Create A Sticky NavBar Using Tailwind CSS?

Sticky Navbar in Tailwind CSS is mostly used in applications where maintaining quick access to navigation links is essential as users scroll through content. It ensures that the navbar remains visible at the top of the screen, enhancing user experience by providing constant access to key sections of

How to Code Pixel Perfect Design using Tailwind CSS ?

Pixel-perfect design refers to the ability to create designs that are accurate down to the pixel level. Tailwind CSS is a popular utility-first CSS framework that can help developers to create pixel-perfect designs quickly and efficiently. In this article, we'll discuss how to code pixel-perfect des

How to Set Width Transition in Tailwind CSS ?

In Tailwind CSS, setting a width transition allows for smooth animation when an element's width changes. It enhances the user experience by gradually transitioning the width over a specified duration, creating a polished effect. Tailwind's utility classes make implementing transitions simple.Approac

How to use motion-safe and motion-reduce in Tailwind CSS ?

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. In Tailwind CSS, motion-safe and motion-reduce are utility classes used for creating animations. motion-safe ensures a

How to Make Auto Scrolling with CSS?

Auto scrolling can add a dynamic touch to your web pages which makes them more engaging and interactive. Whether you need a horizontal or vertical scroll, CSS provides a way to achieve this effect smoothly. In this article, we will discuss how to make an auto scrolling effect with CSS. ApproachCreat