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
- 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>
withhref
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.
<!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 ">
w3wiki
</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:
Contact Us