DEV Community

Cover image for Tailwind CSS Scroll Behavior Example
saim
saim

Posted on • Originally published at larainfo.com

Tailwind CSS Scroll Behavior Example

#tailwindcss #css #webdev #tutorial

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

Top comments (0)

Read next

prasetyomuhdwi profile image

Setup path aliases in React + Vite + TS Project 🤓

Muhammad_Dwi_Prasetyo -

sm0ke profile image

Django - Adding Hot Reload (with sample)

Sm0ke -

mattlewandowski93 profile image

Creating a Planning Poker Demo app 🃏🕹ī¸

Matt Lewandowski -

dhanushnehru profile image

What happens when you type a URL into your browser?

Dhanush N -