顺风 css 边距类未将边距应用于组件，做出反应

Posted 2023-03-06

【中文标题】顺风 css 边距类未将边距应用于组件，做出反应

【英文标题】：tailwind css margin class not applying margin to component, react

【发布时间】：2021-11-11 01:44:22

【问题描述】：

如果我向组件添加 my-30 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 my-30 mr-auto ml-auto">
        <SignIn />
        <SignUp />
    </div>
);

export default SignInAndSignUpPage;

结果是：

但预期的结果是：

如何使用顺风类实现预期结果

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

【问题讨论】：

因为没有使用grid，所以需要在<SignIn />或<SignUp />组件内直接添加margin

【参考方案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 />或两者中添加边距