scrollbar style not apply when i use tailwindcss #14389
Eng1Mahmoud
started this conversation in
General
Replies: 2 comments
-
style of scrollbar apply only when i remove https://github.com/tailwind base; can you help me |
Beta Was this translation helpful? Give feedback.
0 replies
-
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
this file css @tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
--sb-track-color: #232e33;
--sb-thumb-color: #6baf8d;
--sb-size: 14px;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: var(--sb-size) !important;
}
body::-webkit-scrollbar-track {
background: var(--sb-track-color) !important;
border-radius: 3px !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
-ms-border-radius: 3px !important;
-o-border-radius: 3px !important;
}
body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color) !important;
border-radius: 3px !important;
-webkit-border-radius: 3px !important;
-moz-border-radius: 3px !important;
-ms-border-radius: 3px !important;
-o-border-radius: 3px !important;
}
@supports not selector(::-webkit-scrollbar) {
body {
scrollbar-color: var(--sb-thumb-color) var(--sb-track-color) !important;
}
}
html,
body {
scroll-behavior: smooth;
overflow-x: hidden;
}
/font styles/
h1,
h2,
h3,
h4,
h5,
h6,
a {
font-family: var(--main-font);
}
/end font styles
/style input caret/
input[type="text"] {
caret-color: green;
}
/* end style input caret*/
/* a */
a {
text-decoration: none !important;
color: inherit;
}
}
/custom components styles/
@layer components {
.btn-primary {
@apply bg-main-main text-text-third border-0 hover:bg-main-hover hover:border-0;
}
.box-shadow {
@apply shadow-2xl p-5 rounded-lg border border-gray-200;
}
}
/custom utilities styles/
@layer utilities {
}
I use nextjs , and code for scrollbar style I creat by using this website >> https://scrollbar.app/
Beta Was this translation helpful? Give feedback.
All reactions