如何使用justify-between Tailwind？

Question

我是顺风css的新手。我有一个导航栏，我试图添加一个容器和justify-between，但CSS不适用。意思是，它没有增加间距。但是justify-around可以工作，背景颜色也可以工作，有趣的是Tailwind安装正确这里是我的代码...

const NavBar = () => {
    return (
        <header className="bg-red-600">
            <div className="container mx-auto flex justify-between">
                <nav>
                    <NavLink to="/" exact>
                        Shloimi
                    </NavLink>
                    <NavLink to="/post">
                        Blog Posts
                    </NavLink>
                    <NavLink to="/project">
                        Projects
                    </NavLink>
                    <NavLink to="/about">
                        About
                    </NavLink>
                </nav>
            </div>
        </header>
    );
};

function App() {
    return (
        <Router>
            <NavBar/>
            <Switch>
                <Route component={Home} path='/' exact/>
                <Route component={About} path='/about'/>
                <Route component={SinglePost} path='/post/:slug'/>
                <Route component={Post} path='/post'/>
                <Route component={Project} path='/project'/>
            </Switch>
        </Router>
    );
}

export default App;

谁能帮帮我。

Answer 1

因为，justify-between实用程序用于控制如何沿容器的主轴定位弹性项和网格项。所以你需要像这样的改变..如果有两个或更多的孩子，justify-between作为父母工作。在这种情况下，NavLink是孩子

        <nav className="container mx-auto flex justify-between">
                <NavLink to="/" exact>
                    Shloimi
                </NavLink>
                <NavLink to="/post">
                    Blog Posts
                </NavLink>
                <NavLink to="/project">
                    Projects
                </NavLink>
                <NavLink to="/about">
                    About
                </NavLink>
        </nav>

祝你编码愉快！