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

elpidaguy profile image

Implement a Time-based Service in .NET 8 using IHostedService InterfaceπŸ”

Kaustubh Joshi -

fallon_jimmy profile image

Understand cURL more in Just 10 Minutes！πŸ”₯πŸ”₯

Fallon Jimmy -

inspius profile image

Why Offshore Laravel Development in Vietnam is a Smart Choice for Your Business

Inspius -

mike_andreuzza profile image

Learn ow to create a set of tabs with Tailwind CSS and Alpine JS

Michael Andreuzza -