Я не могу заставить тему daisyui распространяться в приложении next.js

Я пытаюсь использовать тему из «Daisyui», которая представляет собой библиотеку компонентов CSS на основе попутного ветра https://daisyui.com/. У меня есть приложение next.js, где точкой входа является pages/_app.tsx. Глядя на примеры и читая документацию веб-сайта, похоже, что тема передается от самого высокого компонента ко всем внутренним компонентам.

Вы добавляете daisyui в файл tailwind.config.js, вот так:

Я сделал свой файл tailwind.config.js таким:

/** @type {import('tailwindcss').Config} */
module.exports = {
    //...
    content: ['./pages/**/*.{js,ts,jsx,tsx}'],
    plugins: [require("daisyui")],
    daisyui: {
      themes: true
    }
  }

true означает, что включены все темы.

Я добавил тему «synthwave» в компонент самого высокого уровня приложения next.js, который представляет собой тег div, обернутый вокруг Component:

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div theme-data = "synthwave">
  <Component {...pageProps} />
  </div>
  )
}

export default MyApp

Я также сделал файл postcss.config.js

module.exports = {
    plugins: ['tailwindcss', 'autoprefixer'],
  };

И я импортировал

@tailwind base;
@tailwind components;
@tailwind utilities;

в верхней части globals.css.

Это не удается, потому что полученная веб-страница просто белая.

Но что странно, так это то, что я меняю daisyui: { themes: true } в tailwind.config.js на daisyui: { themes: ["synthwave"] }. Веб-страница правильно оформлена синтвейвом daisyui:

Я предполагаю, что это работает только потому, что переопределяет ВСЕ стили на каждой странице, а я этого не хочу. Я хочу иметь возможность объявлять разные темы на любой странице, если захочу. Итак, как мне правильно установить тему для всего приложения, чтобы я мог переопределить ее на отдельных страницах, если захочу?