0

我使用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: [],
};

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

4

1 回答 1

0

您的模板需要您的 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;

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

于 2022-01-27T23:55:52.373 回答