我有一个 next.js 应用程序，它使用 DaisyUI，它是一个基于 tailwind 的 css 组件库。问题是我无法让任何 DaisyUI 导航栏水平延伸到整个网页。导航栏组件垂直堆积在页面左侧。
这就是它应该看起来的样子
因此，我将 DaisyUI 示例中的 JSX 代码复制到我的 next.js 应用程序的布局中，但正如您从第一张图片中看到的那样，它不起作用。
这是我的应用程序中的相关代码:“_app.tsx”
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Layout from '../components/Layout'
function MyApp({ Component, pageProps }: AppProps) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
“index.tsx”
import type { NextPage } from 'next'
import { useState } from 'react'
import styles from '../styles/Home.module.css'
const Home: NextPage = () => {
return (
<div className="hero min-h-screen bg-base-200">
<div className="hero-content text-center">
<div className="max-w-md">
<h1 className="text-5xl font-bold">Hello visitor</h1>
<p className="py-6">This is a placeholder for the landing page of my website</p>
<button className="btn btn-primary">Get Started</button>
</div>
</div>
</div>
)
}
export default Home
“组件/Layout.tsx”
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
const Layout = ({ children } : { children: any }) => {
return (
<div data-theme="synthwave" className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="navbar bg-base-100">
<div className="navbar-start">
<div className="dropdown">
<label tabIndex={0} className="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
</label>
<ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Homepage</a></li>
<li><a>Portfolio</a></li>
<li><a>About</a></li>
</ul>
</div>
</div>
<div className="navbar-center">
<a className="btn btn-ghost normal-case text-xl">daisyUI</a>
</div>
<div className="navbar-end">
<button className="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</button>
<button className="btn btn-ghost btn-circle">
<div className="indicator">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
<span className="badge badge-xs badge-primary indicator-item"></span>
</div>
</button>
</div>
</div>
<main className={styles.main}>
{children}
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
);
};
export default Layout
这也是 tailwind.config.js 文件:
/** @type {import('tailwindcss').Config} */
module.exports = {
//...
content: ['./pages/**/*.{js,ts,jsx,tsx}'],
plugins: [require("daisyui")],
daisyui: {
styled: true,
themes: true,
base: true,
utils: true,
logs: true,
rtl: false
}
}
我不明白为什么导航栏在左侧被挤在一起。正如您所看到的，synthwave 主题加载得很好。此外，Head、“Hello guest”hero、“开始”按钮等...都加载正常。导航栏不会拉伸(stretch)。那么为什么导航栏没有水平延伸到整个页面呢？
最佳答案
问题出在 tailwind.config.js 文件上。我把它改成这样:
/** u/type {import('tailwindcss').Config} */
module.exports = {
//...
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
plugins: [require("daisyui")],
daisyui: {
styled: true,
themes: true,
base: true,
utils: true,
logs: true,
rtl: false
}
}
如您所见，我将 './components/**/*.{js,ts,jsx,tsx}' 添加到文件的内容部分。这会将 DaisyUI 应用于 Layout.tsx 文件
关于next.js - Next.js 应用程序中的 Tailwind 和 DaisyUI，我无法让导航栏延伸到整个网页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74132550/