Utilizing a theme from "Daisyui," a tailwind-based CSS component library available at , is my current endeavor. In my next.js application, the starting point is pages/_app.tsx. As per examples and documentation on the website, it appears that the theme gets passed on from the top-level component to all inner components.
The process involves adding daisyui to the tailwind.config.js file in this manner:
https://i.sstatic.net/iTwKb.png
This configuration resulted in my tailwind.config.js looking like:
/** @type {import('tailwindcss').Config} */
module.exports = {
//...
content: ['./pages/**/*.{js,ts,jsx,tsx}'],
plugins: [require("daisyui")],
daisyui: {
themes: true
}
}
With true signifying inclusion of all themes.
I've integrated the "synthwave" theme into the top level component of my next.js app, which encapsulates Component within a div tag:
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
In addition, I created a postcss.config.js file:
module.exports = {
plugins: ['tailwindcss', 'autoprefixer'],
};
Furthermore, I included:
@tailwind base;
@tailwind components;
@tailwind utilities;
at the beginning of the globals.css file.
However, this setup failed as the resulting webpage displayed as plain white.
https://i.sstatic.net/vA6Y3.jpg
Strangely, when I amended daisyui: { themes: true } in tailwind.config.js to
daisyui: { themes: ["synthwave"] }https://i.sstatic.net/bknAu.jpg
Presumably, this works because it overrides ALL styles across every page, which is not the desired outcome. The goal is to define a theme for the entire app while retaining the ability to override it on specific pages if needed. How can I achieve this?