In this section we will see how to use Scroll Behavior in tailwind css. Tailwind CSS 3 support scroll-smooth class so we don't need to write custom Scroll Behavior class. We will see smooth scroll, smooth Scroll Behavior effect, navbar with smooth scroll example with Tailwind CSS.
Example 1
We can use the scroll-smooth utilities class to enable smooth scrolling within an element.
<html class="scroll-smooth">
<!-- ... -->
</html>
Basic usage of scroll smooth in tailwind css 3.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS 3 scroll-smooth </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<ul>
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#features">features</a>
<a href="#team">Our Team</a>
</ul>
<section id="about">
<h1>about</h1>
</section>
<section id="features">
<h1>features</h1>
</section>
<section id="team">
<h1>Our team</h1>
</section>
</body>
</html>
Example 2
Hover scroll behavior effect.
<html class="scroll-smooth hover:scroll-auto">
<!-- ... -->
</html>
tailwind css responsive Breakpoints and media queries scroll Behavior.
<html class="scroll-smooth md:scroll-auto">
<!-- ... -->
</html>
Example 3
Tailwind CSS 3 NavBar With Scroll Smooth Behavior.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth md:scroll-auto">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS 3 NavBar With Scroll Smooth </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<nav class="container flex justify-around py-8 mx-auto bg-white">
<div>
<h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
</div>
<div class="space-x-8">
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#features">features</a>
<a href="#team">Our Team</a>
</div>
</nav>
<main>
<section id="about" class="mb-20">
<h1 class="mb-4 text-2xl font-bold text-center">About Section</h1>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 sm:grid-cols-2">
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
</div>
</section>
<section id="features" class="mb-20">
<h1 class="mb-4 text-2xl font-bold text-center">Features Section</h1>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 sm:grid-cols-2">
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
</div>
</section>
<section id="team" class="mb-20">
<h1 class="mb-4 text-2xl font-bold text-center">Our Team Section</h1>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 sm:grid-cols-2">
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
</div>
</section>
</main>
</div>
</body>
</html>
Tailwind CSS 3 Scroll Smooth with margin scroll effect.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS 3 Scroll Smooth with margin scroll</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<nav class="container flex justify-around py-8 mx-auto bg-white">
<div>
<h3 class="text-2xl font-medium text-blue-500">LOGO</h3>
</div>
<div class="space-x-8">
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#features">features</a>
<a href="#team">Our Team</a>
</div>
</nav>
<main>
<section id="about" class="mb-8 scroll-mt-20">
<h1 class="mb-4 text-2xl font-bold text-center">About Section</h1>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 sm:grid-cols-2">
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
</div>
</section>
<section id="features" class="mb-8 scroll-mt-20">
<h1 class="mb-4 text-2xl font-bold text-center">Features Section</h1>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 sm:grid-cols-2">
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
</div>
</section>
<section id="team" class="mb-8 scroll-mt-20">
<h1 class="mb-4 text-2xl font-bold text-center">Our Team Section</h1>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 sm:grid-cols-2">
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
<img class="object-cover w-full border"
src="https://cdn.pixabay.com/photo/2018/05/08/14/34/lightweight-transporter-3383177__340.png" />
</div>
</section>
</main>
</div>
</body>
</html>
Scroll Behavior in tailwind css v2 or using scroll smooth main tailwind directives file.
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-behavior: smooth;
}
Read Also
👉 Tailwind CSS Halloween Buttons Tutorial Example
👉 Tailwind CSS List Style Marker Example
👉 Create a Google Clone UI using Tailwind CSS
👉 Tailwind CSS Use Custom Fonts Example
👉 Tailwind CSS Line Chart Example
👉 Tailwind CSS Gradient Button Example
👉 Tailwind CSS Text Gradient Example
👉 Tailwind CSS Simple POST CRUD UI Example
👉 Tailwind CSS Thank You Page Example
👉 Tailwind CSS 3 Breadcrumb Example
👉 Tailwind CSS 3D Button Example
👉 How to Use Custom Colors in Tailwind CSS
👉 How to Use Strike Tag (cut text) in Tailwind CSS
👉 Tailwind CSS Headings Typography Examples
Top comments (0)