Specificity issue after upgrading to 3.3.1 #11077
Answered
by
krampstudio
krampstudio
asked this question in
Help
-
I have the following setup:
in a css file @layer base {
.dark .text-black {
@apply text-gray-200;
}
} And in my HTML, I have some places I override the <button class="dark:bg-white dark:text-black">I'm a black text on a white background even in dark mode</button> With tailwind 3.2 it was working, getting in the generated code: .dark .text-black{
--tw-text-opacity: 1;
color: rgb(229 231 235/var(--tw-text-opacity));
}
.dark .dark\:text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0/var(--tw-text-opacity));
} But with tailwind 3.3, the specificity of the base style increases: .dark :is(.dark .dark\:text-black) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
:is(.dark .dark\:text-black) {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
} I'm wondering why there's an additional |
Beta Was this translation helpful? Give feedback.
Answered by
krampstudio
May 2, 2023
Replies: 1 comment 1 reply
-
To work it around I had to move away all |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
krampstudio
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To work it around I had to move away all
.dark
overrides from the@layer