如何在Next.js 13（JavaScript版）中集成Tailwind Elements？

核心问题分析 #

你的代码存在两个关键问题：

1. Next.js 13（尤其是App Router）默认组件为服务端组件，直接操作DOM会因为客户端渲染时机不匹配导致组件失效
2. 初始化逻辑不完善，未正确调用initTE完成组件注册，且DOM元素获取方式存在不确定性

修复方案 #

1. 客户端组件标记（App Router必加） #

如果项目使用Next.js 13 App Router，必须给Navbar组件加上'use client'指令，强制组件在客户端渲染，避免服务端渲染时DOM操作无效。

2. 修正组件初始化逻辑 #

用useRef替代getElementById获取DOM元素，确保组件挂载后能准确拿到目标节点；同时完善initTE调用逻辑，完成Tailwind Elements组件的注册。

修正后的Navbar.jsx代码：

'use client';
import { useEffect, useRef } from 'react';

const NavBarv2 = () => {
  const navbarRef = useRef(null);

  useEffect(() => {
    const initComponents = async () => {
      // 动态导入Tailwind Elements模块
      const { initTE, NavBar, Collapse, Dropdown } = await import('tw-elements');
      
      // 初始化需要用到的组件，不传参数则初始化所有组件
      await initTE({ NavBar, Collapse, Dropdown });

      // 也可以选择手动实例化组件（二选一即可）
      // if (navbarRef.current) {
      //   new NavBar(navbarRef.current);
      // }
    };

    initComponents();
  }, []);

  return (
    {/* 绑定ref到导航栏根元素，确保能获取到DOM节点 */}
    <nav ref={navbarRef} id="navbar" className="navbar navbar-expand-lg navbar-light bg-white">
      <div className="container-fluid">
        <a className="navbar-brand" href="#">Navbar</a>
        {/* 必须保留tw-elements要求的data属性，这是交互逻辑的核心标识 */}
        <button
          data-te-collapse-init
          className="navbar-toggler"
          type="button"
          data-te-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div
          data-te-collapse-item
          className="collapse navbar-collapse"
          id="navbarSupportedContent"
        >
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <a className="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            {/* 其他菜单项 */}
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default NavBarv2;

3. 确认tailwind.config.js配置有效性 #

你的现有配置基本正确，只需确保content数组包含tw-elements的JS文件，plugins正确导入插件即可：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    "./node_modules/tw-elements/dist/js/**/*.js",
  ],
  theme: {
    fontFamily:{
      roboto:['Roboto']
    },
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      boxShadow:{
        'nav':["[13px 25px 22px 5px #00000024,3px -4px 22px 31px #00000024]"]
      }
    },
  },
  plugins: [
    require("tw-elements/dist/plugin.cjs")
  ],
}

关键注意事项 #

• 必须保留Tailwind Elements组件要求的data-te-*属性，比如data-te-collapse-init、data-te-target等，这是组件识别交互逻辑的核心
• 动态导入模块时要使用async/await确保模块加载完成再初始化
• 如果使用Pages Router，无需加'use client'指令，但仍需在useEffect中完成组件初始化

内容的提问来源于stack exchange，提问作者Ranjith