Implementing Smooth Scroll Behavior with Tailwind CSS and NextJS
Introduction
Recently I was completing a simple one-page website project with a TailwindUI template and NextJS. I was hoping to achieve some smooth scrolling effects to navigate between sections, but I found the functionality to be broken out of the box.
After a few hours of trying to figure out the issue, it turns out that this issue has to do with how the NextJS <Link> component handles scrolling by default.
What Is Smooth Scrolling?
Just incase you haven't used it before, smooth scrolling is a user experience enhancement that provides a more fluid and enjoyable navigation experience on a website. Instead of abruptly jumping between sections when clicking on internal links, the page scrolls smoothly, making it easier for users to follow the flow of content.
Solving The Problem
In this quick article, I'll guide you through implementing smooth scroll behavior in a NextJS project using Tailwind CSS. We'll also discuss how to properly configure the <Link> component to ensure smooth scrolling works as intended.
Getting Started
To begin, let's set up a new NextJS project and install the necessary dependencies:
1. Create a new NextJS project using the command:
npx create-next-app your-project-name2. Change your current directory to the newly created project folder:
cd your-project-name3. Install Tailwind CSS and its dependencies:
npm install tailwindcss postcss autoprefixer
npx tailwindcss init4. Open the tailwind.config.js file in the root of your project and add the following configuration:
module.exports = {
purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}5. Next, create a postcss.config.js file in the root of your project and add the following configuration:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}6. In the styles folder, rename globals.css to globals.scss and add the following imports at the top of the file:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Now that we've set up the project, let's move on to implementing the smooth scroll behavior.
Implementing Smooth Scroll Behavior
To enable smooth scrolling, we'll add a utility class from Tailwind CSS to the <html> element. This will enable smooth scrolling within the entire document from anchor tags.
1. In your _document.jsx file (or _document.tsx if you set up the project with TypeScript), update the <Html> component to include the smooth-scroll class:
<Html className="scroll-smooth" lang="en">
3. Run the command to build out your project to include the new utility class:
npm run devWith these changes, any element with the `scroll-smooth` class will now have smooth scrolling behavior. Let's see how this works with NextJS's `<Link>` component.
Using The <Link> Component
For me, this was the area where I messed up. It turns out that to ensure that smooth scrolling works correctly with the <Link> component, you need to set the scroll prop to false.
Here's an example of how to use the <Link> component with smooth scrolling enabled:
1. Import the `<Link>` component from the NextJS package and use it in one of your components or pages:
import Link from 'next/link'
export default function Navigation() {
return (
<nav>
<ul>
<li>
<Link href="#section1" scroll={false}>
Section 1
</Link>
</li>
<li>
<Link href="#section2" scroll={false}>
Section 2
</Link>
</li>
<li>
<Link href="#section3" scroll={false}>
Section 3
</Link>
</li>
</ul>
</nav>
)
}2. In your page, add the corresponding sections with the respective IDs:
export default function Home() {
return (
<div>
<Navigation />
<div id="section1" className="h-screen">
<h1>Section 1</h1>
</div>
<div id="section2" className="h-screen">
<h1>Section 2</h1>
</div>
<div id="section3" className="h-screen">
<h1>Section 3</h1>
</div>
</div>
)
}With the scroll prop set to false, the <Link> component will not handle the scrolling behavior, which tries to scroll to the top of the page after visiting the link. This allows the smooth scroll behavior provided by Tailwind CSS utility class to take effect.
Conclusion
Hopefully this helped you if you were running into issues using smooth scrolling with Tailwind CSS and NextJS `<Link>` components.
Feel free to reach out to me if you have questions about it.
