Tailwind CSS justify- Between 不起作用

Question

在我的代码中，调整之间不起作用。这是代码：

import { Container } from 'postcss'
import React from 'react'

export default function Navbar() {
  return (
    <>
    <nav className='w-full flex justify-between'>
      <div>
        asdsad
      </div>
      <div>
        asdsad
      </div>
      <div>
        asdsad
      </div>
    </nav>
    </>
  )
}

justify-center、justify-start 和 justify-end 工作完美，但 justify- Between、justify-strech 等不起作用。

Answer 1

我尝试在这里创建它，它仍然可以正常工作。

这是带有 Tailwind 和 React 的代码的最小版本。它正确显示 div 之间的空间

// Example class component
class Navbar extends React.Component {
  render() {
    const { title } = this.props;
    console.log("rendered");
    return (
    <>
      <nav className="w-full flex justify-start">
        <div>aaaa</div>
        <div>bbbb</div>
        <div>cccc</div>
      </nav>
      <nav className="w-full flex justify-between">
        <div>asdsad</div>
        <div>asdsad</div>
        <div>asdsad</div>
      </nav>
</>
    );
  }
}

// Render it
ReactDOM.createRoot(document.getElementById("root")).render(<Navbar />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>    


<!-- Tailwind docs: https://tailwindcss.com/docs/installation/play-cdn -->
<script src="https://cdn.tailwindcss.com"></script>


<div id="root"></div>