html {
scroll-behavior: smooth;
}
Smooth Scroll in Tailwind CSS
Smooth scrolling is a feature that allows the website to smoothly scroll to the target section when a link is clicked. It provides a more pleasant and seamless user experience when navigating through the website.
In Tailwind CSS, implementing smooth scroll can be done using the scroll-behavior: smooth; property in the HTML document. This property is applied to the html element, and it instructs the browser to animate the scrolling behavior.
Here’s an example of how to implement smooth scroll in Tailwind CSS:
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scroll in Tailwind CSS</title>
<style>
html {
scroll-behavior: smooth;
}
</style>
</head>
<body class="bg-gray-100 p-4">
<h1 class="text-2xl font-bold mb-4">Smooth Scroll in Tailwind CSS</h1>
<p class="mb-4">Smooth scrolling is a feature that allows the website to smoothly scroll to the target section when a link is clicked. It provides a more pleasant and seamless user experience when navigating through the website.</p>
<p class="mb-4">In Tailwind CSS, implementing smooth scroll can be done using the scroll-behavior: smooth; property in the HTML document. This property is applied to the html element, and it instructs the browser to animate the scrolling behavior.</p>
<p class="mb-4">Here's an example of how to implement smooth scroll in Tailwind CSS:</p>
<pre class="bg-gray-200 p-4 rounded-md text-sm">
<code>
<!-- Your HTML content goes here -->
</code>
</pre>
</body>
</html>
By adding the scroll-behavior: smooth; property to the html element, any anchor links (<a> tags) on the page will automatically have smooth scrolling behavior when clicked. This creates a more polished and modern feel to the website.
Using smooth scroll in Tailwind CSS is a simple yet effective way to enhance the user experience of a website. It provides a more seamless and visually appealing way for users to navigate through the content.
In conclusion, by adding the scroll-behavior: smooth; property to the html element in Tailwind CSS, one can easily implement smooth scrolling behavior on their website, making it more enjoyable for users to navigate through the content.
its not working any solution?
best tutorial. turns out it's so simple. thank youuuu
Thanks for tip really helpful
thanks
It's 100% working thanks a lot for sharing with us🥰