使用TailwindCSS构建主内容容器的最佳实践咨询

你的思路完全正确——用统一的主内容容器控制页面边距、最大宽度和居中对齐，避免给每个页面组件重复加类，这是Tailwind CSS开发中非常高效的做法，也是行业内的常见最佳实践。

简化现有布局结构 #

你当前用两层div实现居中的写法可以进一步简化，不需要额外的flex justify-center容器，直接用mx-auto就能让块级元素水平居中，减少一层嵌套：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// pages
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <div className='font-mono'>
        <Navbar />
        {/* 简化后的主内容容器 */}
        <div className='m-10 lg:max-w-4xl mx-auto'>
          <Routes>
            <Route path='/' element={<Home />}/>
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
          </Routes>
        </div>
      </div>
    </Router>
  );
}

export default App;

进阶：抽成复用组件（推荐） #

如果后续需要在更多页面复用这个容器样式，建议把它封装成独立的组件，这样样式调整只需要在一个地方修改，符合DRY（Don't Repeat Yourself）原则：

// MainContentWrapper.jsx
export default function MainContentWrapper({ children }) {
  return (
    <div className='m-10 lg:max-w-4xl mx-auto'>
      {children}
    </div>
  );
}

然后在App.jsx中引入使用：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import MainContentWrapper from './MainContentWrapper';

// pages
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <div className='font-mono'>
        <Navbar />
        <MainContentWrapper>
          <Routes>
            <Route path='/' element={<Home />}/>
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
          </Routes>
        </MainContentWrapper>
      </div>
    </Router>
  );
}

export default App;

关于当前写法的合理性 #

你现在用div包裹Routes的做法完全符合最佳实践——Routes本身仅负责路由匹配与组件渲染，外层添加布局容器来统一控制页面内容的排版是标准的React路由布局方式，不属于反模式。

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