TheLazy.Dev
Portfolio GitHub

Blog

tailwindcss |css |webdev |tutorial

Tailwind CSS Scroll Behavior Example

saim_ansari

saim

Posted on November 2, 2022

Tailwind CSS Scroll Behavior Example

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Example 2

Hover scroll behavior effect.



<html class="scroll-smooth hover:scroll-auto">
  <!-- ... -->
</html>
Enter fullscreen mode Exit fullscreen mode

tailwind css responsive Breakpoints and media queries scroll Behavior.



<html class="scroll-smooth md:scroll-auto">
  <!-- ... -->
</html>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

tailwind css scroll smooth effect

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>
Enter fullscreen mode Exit fullscreen mode

Scroll Behavior in tailwind css v2 or using scroll smooth main tailwind directives file.



@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

Buy Me A laptop

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

👉 Tailwind CSS Product List Example

👉 How to Center a Div in Tailwind CSS

💖 💪 🙅 🚩
saim_ansari
saim

Posted on November 2, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Experimenting with Tailwind CSS: A Quick Guide
tailwindcss Experimenting with Tailwind CSS: A Quick Guide

August 5, 2024

How to Use Custom Fonts in Tailwind CSS with Example
tailwindcss How to Use Custom Fonts in Tailwind CSS with Example

February 26, 2024

Building Festive Vibes DIY Christmas Card in Tailwind CSS
tailwindcss Building Festive Vibes DIY Christmas Card in Tailwind CSS

December 11, 2023

Tailwind CSS senza Node.js
tailwindcss Tailwind CSS senza Node.js

February 4, 2023

Tailwind CSS Scroll Behavior Example
tailwindcss Tailwind CSS Scroll Behavior Example

November 2, 2022