@raulscoelho/tailwind-scrollbar
v1.1.3
Published
A Tailwind CSS plugin to customize the appearance of scrollbars with utility classes. Easily style scrollbar colors, widths, and track properties to enhance the user experience.
Downloads
5
Readme
@raulscoelho/tailwind-scrollbar
Installation
yarn add @raulscoelho/tailwind-scrollbar
# or
npm i @raulscoelho/tailwind-scrollbarUsage
To use the @raulscoelho/tailwind-scrollbar plugin, you need to add it to your Tailwind CSS configuration file.
Step 1: Configure Tailwind CSS
Add the plugin to your tailwind.config.ts file:
import type { Config } from 'tailwindcss'
import { tailwindScrollbar } from '@raulscoelho/tailwind-scrollbar'
const config: Config = {
// other configurations...
plugins: [
tailwindScrollbar()
]
}
export default configStep 2: Customize the Configuration (Optional)
You can customize the scrollbar by passing a configuration object to the plugin. The configuration object can contain colors and layout properties to define the appearance of the scrollbar.
Colors Configuration
The colors property allows you to define custom colors for the scrollbar thumb and track.
const colors = {
thumb: '#e4e4e7', // color for the scrollbar thumb
thumbHover: '#d4d4d8', // color for the scrollbar thumb on hover
thumbActive: '#a1a1aa', // color for the scrollbar thumb on active
track: '#f4f4f5' // color for the scrollbar track
}Layout Configuration
The layout property allows you to define custom dimensions and border radius for the scrollbar components.
const layout = {
width: '0.5rem', // width of the scrollbar
thumbRadius: '9999px' // border radius of the scrollbar thumb
}Complete Example
Here is a complete example of configuring the @raulscoelho/tailwind-scrollbar plugin:
// tailwind.config.ts
import type { Config } from 'tailwindcss'
import { tailwindScrollbar } from '@raulscoelho/tailwind-scrollbar'
const config: Config = {
// other configurations...
plugins: [
tailwindScrollbar({
colors: {
thumb: '#e4e4e7',
thumbHover: '#d4d4d8',
thumbActive: '#a1a1aa',
track: '#f4f4f5'
},
layout: {
width: '0.5rem',
thumbRadius: '9999px'
}
})
]
}
export default configNext.js Integration
Below is an example showcasing how to integrate the @raulscoelho/tailwind-scrollbar plugin into a Next.js project:
import './globals.css'
import type { Metadata, Viewport } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: {
default: 'Scrollbar Application - Home',
template: 'Scrollbar Application - %s'
}
}
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1
}
interface RootLayoutProps {
children: React.ReactNode
}
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en" className={`${inter.className} antialiased`}>
<body className="flex min-h-[100dvh] flex-col overflow-auto scroll-smooth bg-indigo-50 scrollbar-thumb-active-indigo-400 scrollbar-thumb-hover-indigo-300 scrollbar-thumb-indigo-200 scrollbar-track-indigo-50">
{children}
</body>
</html>
)
}CSS Variables
The plugin creates CSS variables to apply the custom styles to the scrollbar:
--scrollbar-width--scrollbar-height--scrollbar-thumb--scrollbar-thumb-hover--scrollbar-thumb-active--scrollbar-track--scrollbar-thumb-radius--scrollbar-track-radius
You can use these variables in your custom CSS if needed:
/* custom.css */
.custom-scrollbar {
--scrollbar-width: 10px;
--scrollbar-height: 10px;
--scrollbar-thumb: #4A5568;
--scrollbar-track: #EDF2F7;
--scrollbar-thumb-radius: 5px;
--scrollbar-track-radius: 5px;
}