I am trying to tailor an existing DaisyUI theme using my tailwind.config.ts file for my Next.js project.
Although the DaisyUI documentation only provides examples in JavaScript (text), I want to customize it within my TypeScript environment.
Below is a snippet from my tailwind.config.ts where I'm attempting to base my theme on the retro theme:
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
daisyui: {
themes: [
{
mytheme: {
...require("daisyui")['[data-theme=retro]'],
primary: "magenta",
".btn": {
"border-radius": "0px",
}
},
},
],
},
// needs to be after custom theme declaration above?
plugins: [require("daisyui")],
}
export default config
Furthermore, here is a glimpse of my main page layout.tsx in Next.js where I have designated mytheme as the data-theme for DaisyUI:
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Title',
description: 'Descr.',
}
export default function RootLayout(
{ children, }: { children: React.ReactNode }) {
return (
<html lang="en" data-theme="mytheme">
<body className={inter.className}>
<div className='btn btn-primary'>Button</div>
{children}
</body>
</html>
)
}
Currently, the customized color and border-radius are displaying correctly. However, I expected the background color to align with the retro theme, which is not the case.
This is how the unmodified retro theme should appear: https://i.sstatic.net/tQA7l.jpg
While I can individually change properties like .btn with @apply in CSS, I prefer a centralized approach within the tailwind config for all elements.