MonorailCss

Scrollbar Color

Utilities for setting the scrollbar thumb color via scrollbar-color.

Class CSS Output
scrollbar-thumb-red-50 
--tw-scrollbar-thumb: var(--color-red-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-thumb-blue-50 
--tw-scrollbar-thumb: var(--color-blue-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-thumb-green-50 
--tw-scrollbar-thumb: var(--color-green-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-thumb-gray-50 
--tw-scrollbar-thumb: var(--color-gray-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-thumb-[#ff0000] 
--tw-scrollbar-thumb: #ff0000;
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-thumb-red-500/50 
--tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-track-red-50 
--tw-scrollbar-track: var(--color-red-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-track-blue-50 
--tw-scrollbar-track: var(--color-blue-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-track-green-50 
--tw-scrollbar-track: var(--color-green-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-track-gray-50 
--tw-scrollbar-track: var(--color-gray-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-track-[#ff0000] 
--tw-scrollbar-track: #ff0000;
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}
scrollbar-track-red-500/50 
--tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
}

scrollbar-thumb-red-50

--tw-scrollbar-thumb: var(--color-red-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-thumb-blue-50

--tw-scrollbar-thumb: var(--color-blue-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-thumb-green-50

--tw-scrollbar-thumb: var(--color-green-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-thumb-gray-50

--tw-scrollbar-thumb: var(--color-gray-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-thumb-[#ff0000]

--tw-scrollbar-thumb: #ff0000;
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-thumb-red-500/50

--tw-scrollbar-thumb: color-mix(in oklab, var(--color-red-500) 50%, transparent);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-track-red-50

--tw-scrollbar-track: var(--color-red-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-track-blue-50

--tw-scrollbar-track: var(--color-blue-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-track-green-50

--tw-scrollbar-track: var(--color-green-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-track-gray-50

--tw-scrollbar-track: var(--color-gray-50);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-track-[#ff0000]

--tw-scrollbar-track: #ff0000;
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

scrollbar-track-red-500/50

--tw-scrollbar-track: color-mix(in oklab, var(--color-red-500) 50%, transparent);
scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);

Reference

scrollbar-color MDN ↗

CSS Properties

  • scrollbar-color