如何在我的nextjs应用中更新我的模板

x759pob2 于 2022-11-23 发布在其他

关注(0)|答案(2)|浏览(195)

我使用顺风css来构建我的nextjs应用程序，所以我从顺风ui复制了这个模板，它说为了让它正常工作，我必须...。

{/*
      This example requires updating your template:

      ```
      <html class="h-full">
      <body class="h-full">
      ```
    */}

我不知道在哪里我必须更新它。这是我的tailwind.config.js看起来像什么，

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

如果你们能给予我一把，我将不胜感激，谢谢！

next.js

来源：https://stackoverflow.com/questions/70887200/how-to-update-my-template-in-my-nextjs-app

2条答案

按热度按时间

emeijp431#

您的模板需要html和body标记具有h-full类。
使用Next.JS来实现这一点的方法是创建一个自定义文档。为此，在您的pages文件夹中创建一个新文件：./pages/_document.{jsx,tsx}并添加以下代码段：

import Document, {Html, Head, Main, NextScript} from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {...initialProps};
  }

  render() {
    return (
      <Html className="h-full"> // This is where you add the class to the html tag of your page
        <Head/>
        <body className="h-full"> // This is where you add the class to the body tag of your page
        <Main/>
        <NextScript/>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

有关doc中自定义文档的更多信息。

赞(0）回复(0）举报 2022-11-23

eimct9ow2#

在尝试了所有我能想到的添加到我的tailwind.css为我做了。

@layer base {
    html,
    body,
    body>div:first-child,
    div#__next,
    div#__next>div {
        height: 100%;
    }
}

赞(0）回复(0）举报 2022-11-23

我来回答

如何在我的nextjs应用中更新我的模板

2条答案

相关问题

热门标签

最新问答