admin管理员组文章数量:1405609
How can implement dark mode in TailwindCSS v4 using Vite in React project? I did the below code but it didn't work?
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// /config/
export default defineConfig({
darkMode: "media",
plugins: [
react(),
tailwindcss(),
],
})
How can implement dark mode in TailwindCSS v4 using Vite in React project? I did the below code but it didn't work?
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
darkMode: "media",
plugins: [
react(),
tailwindcss(),
],
})
- I can't mark it as a duplicate, but check here: How can I implement the darkmode in my project? or My react and tailwind app are applying the class but the style does not change or How to use custom color themes in TailwindCSS v4 – rozsazoltan Commented Mar 22 at 8:08
1 Answer
Reset to default 0TLDR: Dark mode should definitely not be declared in vite.config.js. Previously, up until v3, it could be set in tailwind.config.js. However, starting from v4, it should only be configured using a custom directive in the CSS file by @custom-directive. See more below in Solution #1.
Note: Both TailwindCSS v3 and v4 have dark mode enabled by default. However, it is not manually switchable; it toggles based on the browser's prefers-color-scheme setting. This can be overridden:
- In v3, by setting the darkMode property in
tailwind.config.js(see Solution #2 below). - In v4, by using the
@custom-directiveproperty (see Solution #1 below - recommended).
You have installed TailwindCSS v4, as seen from the Vite plugin, which has been available since January 2025 with the release of TailwindCSS v4.
In this case, it's important to know that the legacy JavaScript-based tailwind.config.js configuration has been deprecated. Instead, a CSS-first configuration approach has been introduced.
- New CSS-first configuration - StackOverflow
It's important to note that starting from v4, you no longer need to specify which files TailwindCSS should scan for classes—it handles this automatically.
- Automatic Source Detection from TailwindCSS v4 - StackOverflow
You have three options:
Solution #1
Review the new CSS-first directives, including @custom-variant, which allows overriding the default dark: variant behavior.
@custom-variantdirective - TailwindCSS v4 Docs- Toggling dark mode manually - TailwindCSS v4 Docs
app.css
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
template.html
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
Solution #2
Revert to the legacy JavaScript-based configuration using @config, like this:
@configdirective - TailwindCSS v4 Docs- Using a JavaScript config file - TailwindCSS v4 Docs
- TailwindCSS v4 is backwards compatible with v3 - StackOverflow
app.css
@import "tailwindcss";
@config "../../tailwind.config.js";
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// Until TailwindCSS v3.4.0
// darkMode: 'class',
// From TailwindCSS v3.4.1 onwards (or)
// From TailwindCSS v4.0.0 onwards with legacy JavaScript-based configuration
darkMode: 'selector',
}
- Toggling dark mode manually - TailwindCSS v3 Docs
Solution #3 (not recommended)
Use v3 instead of v4. This isn't highly recommended—I'd stick to v4 for a new project—but for an older, larger project, v3 might be more stable.
npm uninstall @tailwindcss/vite
npm install tailwindcss@3 postcss postcss-import
本文标签： tailwind cssHow can implement darkmode in TailwindCSS v4 using Vite in React projectStack Overflow
版权声明：本文标题：tailwind css - How can implement darkmode in TailwindCSS v4 using Vite in React project? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744328154a2600827.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论