Next.js 应用程序中的 Tailwind 和 DaisyUI，我无法让导航栏延伸到整个网页

Question

Next.js 应用程序中的 Tailwind 和 DaisyUI，我无法让导航栏延伸到整个网页

Chr*_*nor 2 navbar flexbox next.js tailwind-css daisyui

我有一个 next.js 应用程序，它使用 DaisyUI，它是一个基于 tailwind 的 css 组件库。问题是我无法让任何 DaisyUI 导航栏在整个网页上水平延伸。导航栏组件垂直堆积在页面左侧。
\n

\n

这就是它应该看起来的样子
\n

\n

因此，我将 DaisyUI 示例中的 JSX 代码复制到我的 next.js 应用程序的布局中，但正如您从第一张图片中看到的那样，它不起作用。

\n

这是我的应用程序中的相关代码：“_app.tsx”

\n

import \'../styles/globals.css\'\nimport type { AppProps } from \'next/app\'\nimport Layout from \'../components/Layout\'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    <Layout>\n      <Component {...pageProps} />\n    </Layout>\n  )\n}\n\nexport default MyApp\n

Run Code Online (Sandbox Code Playgroud)\n

“索引.tsx”

\n

import type { NextPage } from \'next\'\nimport { useState } from \'react\'\nimport styles from \'../styles/Home.module.css\'\n\nconst Home: NextPage = () => {\n  return (\n    <div className="hero min-h-screen bg-base-200">\n      <div className="hero-content text-center">\n        <div className="max-w-md">\n          <h1 className="text-5xl font-bold">Hello visitor</h1>\n          <p className="py-6">This is a placeholder for the landing page of my website</p>\n          <button className="btn btn-primary">Get Started</button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default Home\n

Run Code Online (Sandbox Code Playgroud)\n

“组件/Layout.tsx”

\n

import Head from \'next/head\'\nimport Image from \'next/image\'\nimport styles from \'../styles/Home.module.css\'\n\nconst Layout = ({ children } : { children: any }) => {\n    return (\n        <div data-theme="synthwave" className={styles.container}>\n            <Head>\n                <title>Create Next App</title>\n                <meta name="description" content="Generated by create next app" />\n                <link rel="icon" href="/favicon.ico" />\n            </Head>\n            <div className="navbar bg-base-100">\n                <div className="navbar-start">\n                    <div className="dropdown">\n                    <label tabIndex={0} className="btn btn-ghost btn-circle">\n                        <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>\n                    </label>\n                    <ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">\n                        <li><a>Homepage</a></li>\n                        <li><a>Portfolio</a></li>\n                        <li><a>About</a></li>\n                    </ul>\n                    </div>\n                </div>\n                <div className="navbar-center">\n                    <a className="btn btn-ghost normal-case text-xl">daisyUI</a>\n                </div>\n                <div className="navbar-end">\n                    <button className="btn btn-ghost btn-circle">\n                    <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>\n                    </button>\n                    <button className="btn btn-ghost btn-circle">\n                    <div className="indicator">\n                        <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>\n                        <span className="badge badge-xs badge-primary indicator-item"></span>\n                    </div>\n                    </button>\n                </div>\n            </div>\n            <main className={styles.main}>\n                {children}\n            </main>\n            <footer className={styles.footer}>\n                <a\n                href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"\n                target="_blank"\n                rel="noopener noreferrer"\n                >\n                Powered by{\' \'}\n                <span className={styles.logo}>\n                    <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />\n                </span>\n                </a>\n            </footer>\n        </div>\n    );\n};\n\nexport default Layout\n

Run Code Online (Sandbox Code Playgroud)\n

这也是tailwind.config.js文件：

\n

/** @type {import(\'tailwindcss\').Config} */\nmodule.exports = {\n    //...\n    content: [\'./pages/**/*.{js,ts,jsx,tsx}\'],\n    plugins: [require("daisyui")],\n    daisyui: {\n      styled: true,\n      themes: true,\n      base: true,\n      utils: true,\n      logs: true,\n      rtl: false\n    }\n  }\n

Run Code Online (Sandbox Code Playgroud)\n

我不明白为什么导航栏在左侧被挤在一起。正如您所看到的，synthwave主题加载得很好。此外Head，“您好访客” hero、“开始使用button”等...都加载良好。导航栏不会拉伸。那么为什么导航栏没有水平延伸到整个页面呢？

\n

\xe2\x80\x8b

\n

Answer 1

Chr*_*nor 7

问题出在 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
    }
  }

Run Code Online (Sandbox Code Playgroud)

如您所见，我添加'./components/**/*.{js,ts,jsx,tsx}'到文件的内容部分。这会将 DaisyUI 应用于该Layout.tsx文件

归档时间：	3 年前
查看次数：	2774 次
最近记录：	3 年前