Custom Scrollbars in React using Tailwind CSS: Crafting Custom Responsive Scrollbars

hey everyone I'm niage and today we are diving into an exciting aspect of web design which is creating custom responsive scroll barss with Tailwind CSS so whether you are creating a personal project or maybe working on a client's website this feature is very useful and it's easier than you might think to implement thanks to Tailwind css' powerful and flexible framework and in this video I will walk you through the process of transforming the often overlooked scroll bar into a Sleek responsive element that complements the overall design of your web pages we will be looking at how to hide default scroll bars and customize them to fit your sites aesthetic and ensure they work seamlessly across different browsers and devices now let's take a look at what we are aiming for here is a demo where I have have implemented a custom scroll bar using Tailwind CSS notice how they enhance the user experience without being obtrusive blending perfectly with the design this is exactly what we will be creating together now let's get our hands dirty with some code so this is Visual Studio code with react already set up and Tailwind CSS has also been added to this react project what we will be doing is we we will be adding Tailwind utility classes for custom scroll barss now to add a utility class all we need to do is to Simply add a function to the plugins so function and then we are going to deconstruct the add utilities function argument now inside the function we can simply create a new utilities object which is going to contain the new utilities that we are going to add add to Tailwind so let's do that the first class that we are going to add is scroll bar thin so scroll bar thin let me just close this Explorer so scroll bar thin is going to be an object with the property values scroll bar width and scroll bar color so scroll bar width is going to be thin so we we can just provide the name thin as value over here and then scroll scroll bar color is going to be of value so we are going to use a um you know black color for our scroll bar so RGB and then let me provide um 31 and then 29 and then 29 over here and let's use white so RGB color is for the thumbnail and the white is going to be for the track color and these two properties are specifically for Firefox because Firefox don't give us much options to style our scroll bar so um as far as I know we can only set the scroll bar width and the scroll bar color so this is going to be Capital C because of camel casing and next let's add the class for the webkit scroll bar so dot scroll bar webkit this is also going to be an object let me just scroll up so the property name is going to be this one ment colon colon and then web kit scroll bar the value is going to be an object let's set the width first so for width I'm just going to set the value as apx indicating a thin scroll bar and next property that we are going to add is the scroll bar track so I'm just going to copy this one from over here and then instead of a scroll bar okay we will also need a scroll bar actually so a scroll bar and then track so scroll bar track is going to be for background we are going to set the track as white and we also need another property over here for the scroll bar thumb so scroll bar thumb is going to be for background color I'm going to use the value RGB let's use a slight variation over here so RGB 41 and then 55 okay now we can also set the Border radius so border radius let's set its value as 20px let's set the Border as um standard border 1 PX solid but white and I think that is all we need to do at a minimum to add a custom scroll bar now we need to call this add utilities function which we were getting in the arguments so let's call it add utilities I'm going to provide the new utilities object as an argument for this function and then we can provide for which states we want the scroll bar to be valid so I'm going to add responsive and hover so responsive states are the one for different screen sizes like you know SM MD LG XEL Etc so yeah that's pretty much everything I think we need to do for the plugins and now let's get back to our app.js file to test out this custom scroll bar I'm just going to remove this header from over here let's also remove this app class name and um because we have Tailwind already available so I'm going to use some different classes Flex um H screen and then going have a full width for the parent container and then let's also uh Place items in the center now let's create another div which is going to act as a container for our text area now the reason I am using a container for the text area is because if we will apply the custom scroll bar directly to the text area then that scroll bar is going to mess up its um its border if it's curved so that's why I am using a parent div with a curved border or a rounded border so let's do that width is going to be fit content and height is also going to be the fit content so it doesn't matter what width and height you are going to set for the child text area the parent div is always going to adjust its Dimensions according to it now let's set the rounded to LG and then MX2 Auto to keep it centered and yep now it's time to add the text area so text area and class name I'm going to set resize to none so that it cannot be resized let's set the width to 64 and height to 44 points so these 64 and 44 these are not PX values um they have a specific representation of PX values which you can find in tailin csss documentation let's set the outline into none now let's add our scroll barss so our scroll barss can be added by adding these custom utility classes scroll bar thin for Firefox and scroll bar webkit for webkit based browsers like um you know Chrome Edge Safari Etc and now it's time to see if our code is working as expected or not in the terminal I'm just going to run npm start so now our react application is running on Port Local Host 3000 and now let's paste some text in this text area and you can see that the scroll bar is coming up as expected now let's test the cross browser compatibility so first I'm going to open Firefox this is how it is currently looking in Firefox I'm going to paste the same text and this is how the scroll bar is currently looking so as I said earlier the there are um limited ways to style a scroll bar in Firefox so the webkit based styling is not going to work we have limited options of styling it now let's test it in Edge as well now paste the content and this is how the scroll bar is looking in Edge similar to how it looked in Chrome so custom scroll bars are not just about Aesthetics they have practical applications in the real world for inst since if you are building a digital portfolio then a well-designed scroll bar can make navigating through your work very smooth and enjoyable or if you are developing an online store a custom scroll bar can enhance the shopping experience especially when browsing through extensive product lists so I hope this tutorial helps you see how simple and impactful custom scroll bars can be in Tailwind CSS remember the best way to learn is by doing so I encourage you to experiment with different styles and functionalities finally if you found this video helpful then please consider subscribing to this channel it's a huge encouragement for me to keep creating content that helps you grow as a developer I nage and I will see you in the next video Until Then happy coding

Channel: Code Radiance

Views: 3,311

Keywords: Tailwind CSS Custom Scrollbars, Responsive Web Design, CSS Scrollbar Styling, Tailwind CSS Tutorials, Adaptive User Interface, Cross-Browser Scrollbar Design, Tailwind Utility Classes, Web Development Tips, Responsive CSS Techniques, Modern UI Design Trends

Id: yHF68UXQUI0

Length: 10min 23sec (623 seconds)

Published: Mon Jan 01 2024