How to hide scrollbar with Tailwind css?

hello everyone welcome back to our Channel today we are diving deep into the world of Tailwind CSS to uncover how you can hide scroll bars without compromising on the functionality whether you are a complete beginner or a seasoned developer stick around to learn not only how to achieve this but also the underlying principles that make it work let's get started before we begin for those new to Tailwind CSS it is utility first CSS framework that has been rising in popularity due to flexibility and efficiency essentially you apply Styles directly to your HTML elements through utility classes making the process more intuitive the scroll bar while being a major visual element can sometimes be intrusive especially when aiming for a minimalist design but while you may want to hide it it's essential to ensure users can still scroll and access content there are multiple methods to do that so the first method is using Tailwind utilities so in this method we are combining two class scroll and no scroll bar so let's do that currently this is the Tailwind CSS project that is running in my browser with the basic hello world so now I will replace it with the a lot of dummy text you can see that there is a lot of scroll now I will increase the font size so that we can have more scroll so first of all here I will add overflow y scroll and then we will add no scroll bar so the Overflow y scroll ensures that your content is scrollable in the vertical Direction and no scroll bar class this is our custom utility to hide the scroll bar but wait by default Tailwind does not have no scroll bar utility we will need to add it so let me show you how open your tailwind.config.js file and in the plugin we will Define a custom plugin add function and in that function receive a parameter with utility add utilities and here Define a constant new utilities is equal to this and here at the bottom caller function add utilities and give it the new utilities now in that new utility I will add a property no scroll bar webkit scroll bar display none and after that I will add another property no scroll bar Ms overflow style none then scroll bar with none all right so in this configuration we are essentially telling browsers not to display scroll bar the webkit scroll bar targets webkit browsers like Chrome Safari while Ms overflow style and scroll bar with Target Internet Explorer and Edge and Firefox respectively so now it's time to test it so I am going to for now I will save it without that class right now if you can see there is a scroll bar on the right but if I add no scroll bar you can see that the class that we just defined in the tailwind.config.js is available in the suggestion from the Tailwind so that's mean it is configured and we can use it if you save it and reload it you will see that you are still able to scroll but scroll bar is invisible now let's move on to the second method that is using custom CSS with Tailwind so if you would rather keep things outside of the Tailwinds configuration you can use a regular CSS file so let me open the input.css so I will just add no scroll bar webkit scroll bar add display none no scroll bar Ms overflow tile none scroll bar width none get rid of this plugin that we just made and we will test without it so if we don't have this class added in the HTML you will see that we can see the scroll bar but if you add that class back then scroll bar should be hidden as expected while hiding scroll bars can improve Aesthetics it might affect usability for some users if you choose to go down this path ensure your website remains a user friendly consider providing alternate visual cues for feedback or feedback mechanism to indicate scroll bar to indicate scrollable content all right there you have it two efficient ways to hide the scroll bar entailment CSS remember to test across different browsers to ensure consistent behavior and always prioritize user experience if you found this tutorial helpful then please give it a thumbs up share it and subscribe for more content if you have any questions or topics you would like us to cover next drop them in the comments below thanks for tuning in and happy coding goodbye

Channel: AyyazTech

Views: 8,332

Keywords: CSS Framework, Frontend Development, Minimalist Design, Responsive Design, Tailwind CSS, User Experience Design, User Interface, Web Accessibility, Web Design Trends, Web Development

Id: QnIXTFOtTZI

Length: 5min 3sec (303 seconds)

Published: Wed Sep 13 2023