Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Tailwind CSS justify-between does not work

in my code, justify between does not work. here is the code:

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 and justify-end works perfectly but justify-between, justify-strech etc. does not work.

Tags:

2

Answers


  1. 0

    I try to create it here an it still work correctly.

    This is a minimal version of your code with tailwind and react. And it show space between div correctly

    // 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>
    Login or Signup to reply.
  2. 0

    could you please provide the entire reproducible code so I can try to replicate your issue? I tested the following code, and justify-between works as intended, so I’m unable to reproduce the problem.

    import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
    };
  }

  render() {
    return (
      <>
        <nav className="w-full flex justify-between">
          <div>asdsad</div>
          <div>asdsad</div>
          <div>asdsad</div>
        </nav>
      </>
    );
  }
}

render(<App />, document.getElementById('root'));

    Here on this image you can see the result:

    Problem solved

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search