Smooth Scrolling Effect Using Tailwind CSS and React

Introduction

The smooth Scrolling effect allows users to scroll smoothly while navigating across a webpage instead of jumping directly to the target section of the page. There are various methods to use this in your code, I found the Tailwind CSS method a quick and simple way to do this.

Prerequisites

A react app must have been created successfully. It is also important to have a better understanding of how to navigate across a webpage. Tailwind CSS must have been installed in the react project. Check out this on how to install Tailwind CSS. This article will not cover the installation of frameworks and libraries.

Step 1 — Create the web page(React .js file)

This is the page to enable the smooth scrolling effect when navigating across the web page.

Step 2 — Open the Index.Css file

In Index.Css file, include the tailwind scrolling styling this way :

html {
  scroll-behavior: smooth;
}

The Index.Css file should look like this:

Step 3 — Testing

After starting the app, the scrolling effect works!

This is the simplest and quickest way to enable smooth scrolling in react projects using tailwind CSS.