我想在我的tailwind.config.ts文件中自定义一个现有的DaisyUI主题。我使用Next.js。
在DaisyUI页面上，有仅用于JavaScript的文档（text.以及其他我能在JavaScript中找到的例子。
下面是我的tailwind.config.ts（作为一个例子，我想把我的主题基于复古主题）：
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下面是我的Next.js主页面布局.tsx（我将mytheme声明为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>
)
}我看到的是：
所以我可以看到，自定义颜色和边界半径的工作，但它不是基于复古主题，否则背景的颜色如下所示。
这是什么不变的复古主题看起来像：
我知道我也许可以改变单个类的属性，比如.btn，.在CSS中使用@apply，但我想在一个地方为tailwind配置中的所有元素执行此操作。
1条答案
按热度按时间oxiaedzo1#
先生，试着用
import代替requiredaisyui。看这个例子！