Мобильная версияЯ пытаюсь использовать тему «Daisyui», которая представляет собой библиотеку CSS-компонентов на основе попутного ветра https://daisyui.com/. У меня есть приложение next.js, в котором точкой входа является pages/_app.tsx. Судя по примерам и чтению документации на веб-сайте, кажется, что тема передается от самого высокого компонента ко всем внутренним компонентам.
Вы добавляете daisyui в файл tailwind.config.js, вот так:
Я сделал свой файл tailwind.config.js таким:
/** @type {import('tailwindcss').Config} */ модуль.экспорт = { //... содержимое: ['./pages/**/*.{js,ts,jsx,tsx}'], плагины: [require("daisyui")], маргаритка: { темы: правда } } true означает, что включены все темы.
Я добавил тему «synthwave» в компонент самого высокого уровня приложения next.js, который представляет собой тег div, обертывающий Component:
импортировать '../styles/globals.css' тип импорта { AppProps } из 'next/app' функция MyApp({Component, pageProps}: AppProps) { возвращаться ( ) } экспортировать MyApp по умолчанию Я также создал файл postcss.config.js
module.exports = { плагины: ['tailwindcss', 'autoprefixer'], }; И я импортировал
база @tailwind; компоненты @tailwind; утилиты @tailwind; вверху файла globals.css.
Это не удалось, поскольку полученная веб-страница просто белая.
Но что странно, когда я меняю daisyui: { themes: true в tailwind.config.js на daisyui: { themes: ["synthwave" ] . Веб-страница правильно оформлена в стиле синтезаторной волны Daisyui:
Я предполагаю, что это работает только потому, что переопределяет ВСЕ стили на каждой странице, а мне это не нужно. Я хочу иметь возможность объявлять разные темы на любой странице, если захочу. Итак, как мне правильно установить тему для всего приложения, чтобы при желании можно было переопределить ее на отдельных страницах?
