DEV Community

Cover image for Tailwind CSS Scroll Behavior Example
saim
saim

Posted on โ€ข Originally published at larainfo.com

3

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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)