What version of Tailwind CSS are you using?: v3.3.0
What build tool (or framework if it abstracts the build tool) are you using?: postcss-cli 8.4.32, Next.js 13.4.19, webpack
What version of Node.js are you using?: v20
What browser are you using?: Chrome
What operating system are you using?: Windows
Reproduction URL:
https://play.tailwindcss.com/8lfHYybqfC
Describe your issue
In the repro you can see that in the latest version of tw v3 the scrollbar does not turn green in dark mode, while it does in v2.
There is a workaround if you use the .dark class:
/* THIS DOES NOT WORK */
::-webkit-scrollbar-track { @apply bg-yellow-800 dark:bg-green-800; }
::-webkit-scrollbar-thumb { @apply bg-yellow-500 dark:bg-green-500; }
::-webkit-scrollbar-thumb:hover { @apply bg-yellow-600 dark:bg-green-600; }
/* THIS DOES WORK */
::-webkit-scrollbar-track { @apply bg-yellow-800 }
::-webkit-scrollbar-thumb { @apply bg-yellow-500 }
::-webkit-scrollbar-thumb:hover { @apply bg-yellow-600 }
.dark ::-webkit-scrollbar-track { @apply bg-green-800; }
.dark ::-webkit-scrollbar-thumb { @apply bg-green-500; }
.dark ::-webkit-scrollbar-thumb:hover { @apply bg-green-600; }
This should work with the first option as well.
This issue has already been reported in different discussions without a repro, or in similar issues that were linked to a specific framework.
According to the release article of v3.3 there should be no breaking changes. This is one though.
What version of Tailwind CSS are you using?: v3.3.0
What build tool (or framework if it abstracts the build tool) are you using?: postcss-cli 8.4.32, Next.js 13.4.19, webpack
What version of Node.js are you using?: v20
What browser are you using?: Chrome
What operating system are you using?: Windows
Reproduction URL:
https://play.tailwindcss.com/8lfHYybqfC
Describe your issue
In the repro you can see that in the latest version of tw v3 the scrollbar does not turn green in dark mode, while it does in v2.
There is a workaround if you use the .dark class:
This should work with the first option as well.
This issue has already been reported in different discussions without a repro, or in similar issues that were linked to a specific framework.
@apply dark:doesn't work anymore with vue:deep(.child-class)#11024According to the release article of v3.3 there should be no breaking changes. This is one though.