scroll-behavior
Utilities for controlling the scroll behavior of an element.
| Class | Styles |
|---|---|
scroll-auto | |
scroll-behavior: auto; |
|
| scroll-smooth |
scroll-behavior: smooth;
|
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.
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
[

From the creators of Tailwind CSS
Make your ideas look awesome, without relying on a designer.
“This is the survival kit I wish I had when I started building apps.”
Derrick Reimer, SavvyCal
](https://www.refactoringui.com/?ref=sidebar)
Copyright © 2026 Tailwind Labs Inc.·Trademark Policy