Replies: 2 comments 2 replies
-
|
Seems like it could be that:
Consider providing a git repo that reproduces the unexpected behavior. |
Beta Was this translation helpful? Give feedback.
-
|
Am using only Tailwind with angular all other functionality of Tailwind are working except for the dark mode, its the browser chrome when i set preference to light the color changes to (text-red-900) and when i set browser preference to dark it changes to (dark:text-gray-400). I removed all css and kept only @import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));and am using in index html <html lang="en" dir="ltr" translate="no" class="notranslate dark"></html>am just confused does tailwind not support dark mode toggle using css as the old version, is it now based only on 'prefers-color-scheme' |
Beta Was this translation helpful? Give feedback.
-
@custom-variant dark (&:where(.dark, .dark *));Should work. So it seems like it could be something particular to your project stopping it from working correctly. Consider providing a git repo that reproduces the unexpected behavior. |
Beta Was this translation helpful? Give feedback.
-
|
This is embarrassing, thought the problem could be am using zonless Angular started to edit the files and i had tailwind styles in tailwind.css file and was importing all the css in one core.css file and imported the wrong file @import "tailwindcss"; //it should have been @import "./styles/tailwind";
@import "./styles/fonts";
@import "./styles/layout";
@import "./styles/toolbar";all this mix up cause of the damn scss file of angular-material switching from @import to @use |
Beta Was this translation helpful? Give feedback.
-
What version of Tailwind CSS are you using?
Tailwind :v4.1.4
What build tool (or framework if it abstracts the build tool) are you using?
tailwindcss/postcss: 4.1.4
postcss: 8.5.3
Angular: 19.2.0
What version of Node.js are you using?
nodejs: 20.12.2
What browser are you using?
browser: Version 135.0.7049.95 (Official Build) (64-bit)
What operating system are you using?
OS: Linux
Describe your issue
Started using version 4 and older versions did not have this problem am i missing something, the browser preference (light/dark) takes precedence over tailwind. I added a button that toggles dark class from html tag and still it does not want to switch to light mode. i even added the variant and nothing, as long as the browser has dark theme on with or without dark class it will remain in dark mode am also not using browser extension ex: dark-reader.
example code
with or without the dark class in html header the browser will continue to overrides it by setting it to this
Is there a work around this. thanks
Beta Was this translation helpful? Give feedback.
All reactions