How to configure dark mode using @tailwindcss/vite #16974
Replies: 1 comment 7 replies
-
|
You'd configure it in your CSS, as per the documentation: @import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *)); |
Beta Was this translation helpful? Give feedback.
-
|
Here: https://github.com/tansanDOTeth/tw-v4-dark-mode-broken I would have expected everything to have been forced to dark after adding the class name in html |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure what you mean when you say "everything to have been forced to dark". The aforementioned See the documentation about dark mode for details. |
Beta Was this translation helpful? Give feedback.
-
|
I believe most people visiting this page is expecting to force their tailwind into a dark mode design. It's been a while since I setup a new project, but I believe v3 allowed us to enable dark mode as a default without having to add the There are quite a few similar topics in search like this that expect this behavior: https://stackoverflow.com/questions/79487101/tailwindcss-v4-dark-theme-by-class-not-working-without-dark-tag |
Beta Was this translation helpful? Give feedback.
-
|
Tailwind inheritently doesn't have a "design" as such on its own. If you want a website too have a dark color scheme, consider applying Tailwind utility class names to elements to render your desired color scheme to elements. The question you linked seems to be about having theme color values that change when the |
Beta Was this translation helpful? Give feedback.
-
|
Hmm... I remembered v3 having something out of the box that allowed us to switch between light mode and dark mode really easily without having to customize anything or having to explicitly write a dark selector. I just want to be able to switch to the dark mode without having to add the dark selector in v4, but maybe I misremembered. |
Beta Was this translation helpful? Give feedback.
-
Since I am using svelte, vite, tailwindcss, I do not know / do not have tailwind.config.ts but vite.config.ts:
ref https://tailwindcss.com/docs/installation/framework-guides/sveltekit
I want this to be configured:
darkMode: 'class'
Beta Was this translation helpful? Give feedback.
All reactions