CODEWITHSUNDEEP
reactjstailwind-csst3
Zafersiar Konyar
Zafersiar Konyar

Reputation: 7

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.

here is the tailwind config file:

import { type Config } from "tailwindcss";
import { fontFamily } from "tailwindcss/defaultTheme";

export default {
  content: ["./src/**/*.tsx"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
      },
    },
  },
  plugins: [],
} satisfies Config;

and the global.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

and i have a github repo of the project https://github.com/siarkonyar/loracassi

Upvotes: -1

Views: 49

Answers (2)

Peter Plevko
Peter Plevko

Reputation: 173

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

Upvotes: 1

Pattapong J
Pattapong J

Reputation: 1224

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>

Upvotes: 0

Related Questions