Я не могу получить тему Daisyui, чтобы распространяться в приложении Next.js ⇐ CSS

[Anonymous]

Я пытаюсь использовать тему из «Daisyui», которая представляет собой библиотеку компонентов CSS на основе Tailwind https://daisyui.com/. У меня есть приложение Next.js, где точка входа - Pages/_app.tsx . Из просмотра примеров и чтения документации веб -сайта, похоже, что тема передается из высшего компонента во все внутренние компоненты. src = "https://i.sstatic.net/itwkb.png"/>
Я сделал свой файл tailwind.config.js .

Код: Выделить всё

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

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

Код: Выделить всё

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

function MyApp({ Component, pageProps }: AppProps) {
return (



)
}

export default MyApp
< /code>
I also made a postcss.config.js file
module.exports = {
plugins: ['tailwindcss', 'autoprefixer'],
};
< /code>
And I imported
@tailwind base;
@tailwind components;
@tailwind utilities;
< /code>
at the top of globals.css.
This fails because the resulting webpage is just plain white.

[img]https://i.sstatic.net/vA6Y3.jpg[/img]

But what's weird is when I change daisyui: { themes: true }

in tailwind.config.js to daisyui: {themes: ["synthwave"]} . Веб -страница правильно представлена с помощью синтезированной волны Daisyui:

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

Подробнее здесь: https://stackoverflow.com/questions/739 ... ext-js-app