React项目中Tailwind的my-30等margin类不生效，如何实现预期布局？

问题原因 #

• Tailwind CSS 默认间距体系以4px为步长生成，不存在 my-30 这个预设工具类，因此该样式不会生效。
• 当前 flex 容器未设置最大宽度，块级元素默认宽度为100%，此时给容器添加 mr-auto ml-auto 水平居中规则不会生效。
• 两个表单子元素之间未设置间距，因此会紧密贴合，和预期布局不符。

解决方案 #

你可以直接修改组件类名实现预期效果，修改后代码如下：

import React from "react";

import SignIn from "../../components/sign-in/sign-in.component";
import SignUp from "../../components/sign-up/sign-up.component";

const SignInAndSignUpPage = () => (
    <div className="flex justify-center gap-x-16 my-8 max-w-6xl mx-auto">
        <SignIn />
        <SignUp />
    </div>
);

export default SignInAndSignUpPage;

修改说明

• 将无效的 my-30 替换为Tailwind预设的垂直外边距类，比如 my-8/my-12/my-32，可根据你需要的上下间距大小调整数值。
• 新增 gap-x-16 规则，给flex容器的子元素添加水平间距，控制两个表单之间的空隙，数值可按需调整。
• 将 mr-auto ml-auto 简化为等效的 mx-auto，同时新增 max-w-6xl 给容器设置最大宽度，此时水平居中规则才会生效，最大宽度数值可根据布局需求调整为 max-w-4xl/max-w-7xl等。

如果你确实需要使用 my-30 这个规格的边距，可以在 tailwind.config.js 中扩展间距配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      spacing: {
        '30': '7.5rem', // 对应120px，数值可自定义
      },
    },
  },
}

配置完成后重启开发服务，即可正常使用 my-30 类。

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