如何无需重复组件实现React+TailwindCSS的统一水平内边距与内容居中？

不用重复编写Container组件的话，可以试试这几种方法：

1. 自定义Tailwind工具类（通过配置插件） #

直接在Tailwind的配置文件里封装容器样式为自定义类，之后每个区块只需添加对应的类名即可。

修改tailwind.config.js：

module.exports = {
  // 保留你原有的其他配置
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.section-container': {
          display: 'grid',
          placeItems: 'center',
          width: '100%',
          paddingLeft: '5%',
          paddingRight: '5%',
          '@screen lg': {
            paddingLeft: '2%',
            paddingRight: '2%',
          },
          '@screen xl': {
            paddingLeft: '6%',
            paddingRight: '6%',
          },
        },
        '.section-content': {
          maxWidth: '120rem',
          width: '100%',
        }
      })
    }
  ]
}

之后区块组件里直接使用：

<div className="section-container">
  <div className="section-content">
    {/* 区块内容 */}
  </div>
</div>

2. 用@apply创建自定义组件类 #

在全局CSS文件（比如globals.css）中，用Tailwind的@apply指令把容器样式打包成自定义类：

@tailwind base;
@tailwind components;
@tailwind utilities;

.section-container {
  @apply grid place-items-center w-full px-[5%] lg:px-[2%] xl:px-[6%];
}

.section-content {
  @apply max-w-[120rem] w-full;
}

用法和上面一致，直接给区块外层div添加这两个类名即可，无需重复编写组件逻辑。

3. 全局根布局包裹 #

如果所有区块都需要统一的容器样式，直接做一个全局布局组件包裹整个应用，所有区块组件无需单独处理：

const RootLayout = ({ children }) => {
  return (
    <div className="grid place-items-center w-full px-[5%] lg:px-[2%] xl:px-[6%]">
      <div className="max-w-[120rem] w-full">
        {children}
      </div>
    </div>
  )
}

// 在应用入口（比如App.js）中使用
function App() {
  return (
    <RootLayout>
      <Header />
      <HeroSection />
      <Features />
      {/* 所有区块组件都放在这里 */}
    </RootLayout>
  )
}

这种方式最省心，若有个别区块需要特殊样式，再单独给该区块添加差异化类名即可。

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