reactjstailwind-cssvitedaisyuitailwind-css-4

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'


// 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.

Solution

  • 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;
}

    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>