next.js - 在 NextJS 项目中使用 tw 元素

Question

我正在尝试在 nodejs 项目中使用 tw-elements。如果我遵循他们的documentation只需在我的 _app 中导入 tw-elements，我就会收到此错误:

ReferenceError:文档未定义

我发现一个 stackoverflow 响应说要把它放在 tw-elements 的 index.min.js 文件的开头:

if(窗口类型==“未定义”)return;

我这样做了，错误消失了，但库仍然无法工作。有什么想法吗？

Answer 1

首先，使用这些 NPM 步骤添加 Tailwind 元素 here .

以下是如何让它与 Nextjs 一起工作:

第一步是将此代码添加到您的 _app.js 文件中:

  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);

例如这样:

export default function App({ Component, pageProps }) {
  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);
return (

确保将 import { useEffect } from "react"; 添加到 _app.js 的顶部。

同样重要的是，不要将 Tailwind Elements 导入 _app.js 文件之外的任何其他位置。

Tailwind Elements 现在应该可以工作了!