如何使用 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 实用程序用于控制 flex 和 grid 项目如何沿容器的主轴定位。 所以你需要这样的改变。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>

编码愉快！