如何在nextjs中安装tailwind元素？

Question

我正在 nextjs 中为滑块安装 tailwind 元素，但它在 nextjs 中不起作用，有任何解决方案可以轻松安装它。

[我遵循这个方法][1] [1]：https://tailwind-elements.com/quick-start/ 当我添加此 import 'tw-elements'; 然后它告诉我一个错误

Answer 1

一位用户在 Github 的 issues 中解决了这个问题。它对我有用，希望它对您有用，这是该问题的链接。

在您的_app.js文件中更新为：

function MyApp({ Component, pageProps }: AppProps) {


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

  return <Component {...pageProps} />;
}

export default MyApp;

Answer 2

我遇到了同样的问题，解决方法非常简单。在您的项目中编辑node_modules/tw-elements/dist/js/index.min.js

一开始的改变

function(n){

为了这

function(n){if (typeof window == "undefined")return;

瞧！

注意：如果您的项目使用 VErcel 或任何其他 Nextjs 托管，您会注意到它会自动下载所有模块，因此您在本地项目中所做的更改不会反映在部署中。

幸运的是，您可以在 Vercel 中运行预构建命令：

1. 转到项目设置_>常规

2. 覆盖构建命令

3. 将其放入该字段中：

   sed -i 's/function(n){var r={};function o(t)/function(n){if(typeof window == "undefined")return;var r={};function o(t )/g'node_modules/tw-elements/dist/js/index.min.js; 下一个版本

嗯……虽然又蹩脚又丑陋，但它确实有效