darkmod

[MGdevloper]

Tailwind CSS version: v4.1
Build tool / framework: Next.js, Vite
Node.js version: v20.0.0
Browser: Chrome
OS: Windows

Issue / Question:
I’m migrating a project from Tailwind v3.4.17 to v4.1. In v3, I could enable dark mode easily by setting darkMode: 'class' in tailwind.config.js and using dark: prefixes.

After upgrading to v4.1, the same setup doesn’t work: dark: styles are not applied as expected.

I’m looking for guidance on the correct way to set up dark/light mode in Tailwind v4.1. Is the configuration approach different, or is there a recommended migration path for dark mode?

[wongjn]

The equivalent dark mode configuration is as per the documentation:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

Assuming you used the upgrader tool, could you give a repo that demonstrates the darkMode config not being migrated please so we can take a look?

[MGdevloper]

@wongjn
this config
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

is not working in nextjs latest ver i use tailwind old version tailwindcss@3 that simple work useing prefix dark:

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.