如何在我的 nextjs 应用程序中更新我的模板答案

【问题标题】：How to update my template in my nextjs app如何在我的 nextjs 应用程序中更新我的模板
【发布时间】：2022-01-28 07:55:52
【问题描述】：

我使用tailwind css 来构建我的nextjs 应用程序，所以我从tailwind 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: [],
};

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

【问题讨论】：

标签： reactjs next.js tailwind-ui

【解决方案1】：

您的模板需要您的 html 和 body 标签才能具有 h-full 类。

使用 Next.JS 执行此操作的方法是创建自定义文档。为此，请在您的 pages 文件夹中创建一个新文件：./pages/_document.{jsx,tsx} 并添加以下 sn-p：

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 中有关自定义文档的更多信息。

【讨论】：

感谢您的响应，但在页面内创建该文件并复制代码后，模板仍然无法正常工作。除了 className="h-full" 之外，我还应该在 html 和 body 旁边放置其他内容吗？我希望模板在组件内的特定文件上工作。
(1) 您是否重新启动了您的开发服务器？ (2) 检查您的 dom 时新类是否正确显示？否则我需要更多的上下文来帮助，你有源链接吗？或者至少是您正在使用的模板的链接？
我确实重新启动了它。当我检查我的 devtool 中的元素时，它看起来就像它在 DOM 中的样子。我认为这与我的 _app.js 和我用于每个页面的布局有关...我认为这个特定页面我不需要任何布局，只需要模板的内容就可以了