时间戳

首页 > 解决方案 > 如何使用 justify-between Tailwind？

reactjs - 如何使用 justify-between Tailwind？

问题描述

我是顺风 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;

有人可以帮帮我吗。

标签： reactjstailwind-css

解决方案

因为，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>

快乐编码！

推荐阅读