reactjs - DaisyUI themes are not working for Vite + React project

I've created a project using Vite + React, also installed latest version of TailwindCSS. But daisyui is not working, even if I apply themes it is not working. output image is attached, whereas having only the text, but no themes are applied; Output image

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'


// /config/
export default defineConfig({
  plugins: [react(),
    tailwindcss()
  ],
})

index.css

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

App.jsx

function App() {
  return (
    <>
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
    </>
  )
}

export default App

How can I fix this, please help.

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({
  plugins: [react(),
    tailwindcss()
  ],
})

index.css

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

App.jsx

function App() {
  return (
    <>
      <h1 className="text-3xl font-bold underline">
        Hello world!
      </h1>
    </>
  )
}

export default App

How can I fix this, please help.

Share Improve this question edited Mar 21 at 5:57 rozsazoltan 11.1k6 gold badges20 silver badges58 bronze badges asked Mar 20 at 18:15 nidhishree rao 234 bronze badges

I don't understand what result you're expecting. The screenshot result is perfect. The default light theme background is white. The h1 has no extra formatting on its own. See here: play.tailwindcss/MdWdR4mXQm?file=css – rozsazoltan Commented Mar 20 at 19:29
If the question is - though it isn't - why the cupcake theme is not taking effect, the code snippet doesn't show how you're applying it. The answer is that it needs to be applied to the parent element, see: play.tailwindcss/0aExM8NHKk?file=css – rozsazoltan Commented Mar 20 at 19:31
If the question is how you can change the default theme - though it isn't, since you specified the light theme as the default - then the answer is that you need to set the cupcake theme as the default somehow, see: play.tailwindcss/VQXsTwlh7l?file=css with themes: light, dark --prefersdark, cupcake --default; – rozsazoltan Commented Mar 20 at 19:32

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

The light theme is perfect; it looks exactly as shown in the screenshot.

To change the default theme, you need to set another theme as the default, like this (set cupcake as default):

@import "tailwindcss";
@plugin "daisyui"{
  themes: light, dark --prefersdark, cupcake --default;
}

DaisyUI playground with TailwindCSS v4

If you want to use the light theme by default but are curious about how to apply the cupcake theme, the answer is that you need to set the cupcake theme in the data-theme attribute of one of the parent elements. You can set this either within a specific div for a limited scope or in the body to apply it to the entire page.

@import "tailwindcss";
@plugin "daisyui"{
  themes: light --default, dark --prefersdark, cupcake;
}

<body data-theme="cupcake">
  ...
</body>

DaisyUI playground with TailwindCSS v4

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

reactjs - DaisyUI themes are not working for Vite + React project - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)