📄 tailwindcss/docs/scroll-behavior

File: scroll-behavior.md | Updated: 11/15/2025

Source: https://tailwindcss.com/docs/scroll-behavior

v4.1

⌘KCtrl KDocs Blog Showcase Sponsor Plus

  1. Interactivity
  2. scroll-behavior

Interactivity

scroll-behavior

Utilities for controlling the scroll behavior of an element.

| Class | Styles | | --- | --- | | scroll-auto | scroll-behavior: auto; | | scroll-smooth | scroll-behavior: smooth; |

Examples


Using smooth scrolling

Use the scroll-smooth utility to enable smooth scrolling within an element:

<html class="scroll-smooth">  <!-- ... --></html>

Setting the scroll-behavior only affects scroll events that are triggered by the browser.

Using normal scrolling

Use the scroll-auto utility to revert to the default browser behavior for scrolling:

<html class="scroll-smooth md:scroll-auto">  <!-- ... --></html>

On this page

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy