Tailwind CSS Scroll Behavior Example
Tags: tailwindcss, css, webdev, tutorial
Published: 2022-11-02 07:21:16

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.
<br>

### Example 1
We can use the scroll-smooth utilities class to enable smooth scrolling within an element.
```html
<html class="scroll-smooth">
  <!-- ... -->
</html>
```
Basic usage of scroll smooth in tailwind css 3.

```html
<!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
<html class="scroll-smooth hover:scroll-auto">
  <!-- ... -->
</html>
```

tailwind css responsive Breakpoints and media queries scroll Behavior.
```html
<html class="scroll-smooth md:scroll-auto">
  <!-- ... -->
</html>
```

---


### Example 3
Tailwind CSS 3 NavBar With Scroll Smooth Behavior.
```html
<!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 scroll smooth effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9t4fqprlb311apm2usd6.png)


Tailwind CSS 3 Scroll Smooth with margin scroll effect.
```html
<!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.
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}
```

[![Buy Me A laptop](https://demo.larainfo.com/images/help-me-to-buy-a-laptop.png)](https://www.buymeacoffee.com/same6)


### Read Also
👉 [Tailwind CSS Halloween Buttons Tutorial Example](https://larainfo.com/blogs/tailwind-css-halloween-buttons-tutorial-example)

👉 [Tailwind CSS List Style Marker Example](https://larainfo.com/blogs/tailwind-css-list-style-marker-example)

👉 [Create a Google Clone UI using Tailwind CSS](https://larainfo.com/blogs/create-a-google-clone-ui-using-tailwind-css)

👉 [Tailwind CSS Use Custom Fonts Example](https://larainfo.com/blogs/tailwind-css-use-custom-fonts-example)

👉 [Tailwind CSS Line Chart Example](https://larainfo.com/blogs/tailwind-css-line-chart-example)

👉 [Tailwind CSS Gradient Button Example](https://larainfo.com/blogs/tailwind-css-gradient-button-example)

👉 [Tailwind CSS Text Gradient Example](https://larainfo.com/blogs/tailwind-css-text-gradient-example)

👉 [Tailwind CSS Simple POST CRUD UI Example](https://larainfo.com/blogs/tailwind-css-simple-post-crud-ui-example)

👉 [Tailwind CSS Thank You Page Example](https://larainfo.com/blogs/tailwind-css-thank-you-page-example)

👉 [Tailwind CSS 3 Breadcrumb Example](https://larainfo.com/blogs/tailwind-css-3-breadcrumb-example)

👉 [Tailwind CSS 3D Button Example](https://larainfo.com/blogs/tailwind-css-3d-button-example)

👉 [How to Use Custom Colors in Tailwind CSS](https://larainfo.com/blogs/how-to-use-custom-colors-in-tailwind-css)

👉 [How to Use Strike Tag (cut text) in Tailwind CSS](https://larainfo.com/blogs/how-to-use-strike-tag-cut-text-in-tailwind-css)

👉 [Tailwind CSS Headings Typography Examples](https://larainfo.com/blogs/tailwind-css-headings-typography-examples)

👉 [Tailwind CSS Product List Example](https://larainfo.com/blogs/tailwind-css-product-list-example)

👉 [How to Center a Div in Tailwind CSS](https://larainfo.com/blogs/how-to-center-a-div-in-tailwind-css)