tailwind css margin class 没有对组件应用 margin，react

Question

如果我在组件中添加 my-30 mr-auto ml-auto 的 class 为什么我没有得到利润：

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 my-30 mr-auto ml-auto">
        <SignIn />
        <SignUp />
    </div>
);

export default SignInAndSignUpPage;

结果是：

但预期的结果是：

如何使用 tailwind 获得预期结果 classes

注意：我已经使用 npm 安装了 tailwind css 库，其他 classes 工作正常，但是这个 class 不工作

Answer 1

获取结果的方式多种多样：

为每个组件添加容器并为其留余量：

const SignInAndSignUpPage = () => (
    <div className="flex justify-center my-30">
        <div className="mr-4">
            <SignIn />
        </div>        
        <div className="ml-4">
            <SignUp />
        </div>
    </div>
);

使用网格

const SignInAndSignUpPage = () => (
    <div className="grid grid-cols-2 space-x-2">
        <SignIn />
        <SignUp />
    </div>
);

在组件内添加边距 <SignIn /> 或 <SignUp /> 或两者

tailwind css margin class 没有对组件应用 margin，react

tailwind css margin class not applying margin to component, react

reactjs

tailwind-css