Next.js 14 + TailwindCSS 页面重载后内边距失效内容重叠求助

AI 小北

2026-6-17

Next.js 14 + TailwindCSS 布局重叠问题及文件夹结构确认

布局重叠问题

用Next.js 14搭配TailwindCSS开发时遇到问题：在Layout组件给body设置了pl-[15rem]，侧边栏宽度为15rem，目标是让页面内容右移、侧边栏固定在左侧。首次加载时布局正常，但页面重载后，页面内容与侧边栏发生重叠。

相关代码

Layout.tsx

<html lang="en">
  <body
    className={`antialiased relative pl-[15rem]`}
  >
    <Sidebar />
    {children}
  </body>
</html>

Sidebar.tsx

<div className='w-[15rem] h-dvh shadow-md absolute top-0 left-0 z-10'>
  <ul className='p-2'>
    {
      menus.map((menu) => (
        <Link href={menu.link} key={menu.title}>
          <li className='p-2 font-semibold rounded-sm hover:bg-slate-200'>{menu.title}</li>
        </Link>
      ))
    }
  </ul>
</div>

page.tsx

<div className='p-3 relative'>
  <h1 className='font-bold text-2xl mb-3'>Dashboard</h1>
  <Table
    aria-label="Example table with dynamic content"
    className='mb-3'>
    <TableHeader>
      {
        columns.map((column) => (
          <TableColumn key={column.key}>{column.label}</TableColumn>
        ))
      }
    </TableHeader>
    <TableBody items={rows}>
      {
        rows.map((item) => (
          <TableRow key={item.key}>
            <TableCell>{item.name}</TableCell>
            <TableCell>{item.sales}</TableCell>
            <TableCell>{item.income}</TableCell>
          </TableRow>
        ))
      }
    </TableBody>
  </Table>
  <Pagination
    total={10}
    initialPage={1}
    // className='float-right'
    onChange={handlePageChange} />
</div>