CODEWITHSUNDEEP
reactjstailwind-css
npkp
npkp

Reputation: 1241

Tailwind CSS - mx-auto not centering div element?

I am building a project in React with Tailwind CSS and I am trying to center <div> element with <div className="container mx-auto"> but it does not center the element. what wrong with the code.

import React from "react";
import { NavLink } from "react-router-dom";

function NavBar() {
  return (
    <header className="bg-red-600">
      <div className="container mx-auto flex justify-between">
        <nav className="flex">
          <NavLink
            to="/"
            exact
            activeClassName="text-white"
            className="inline-flex items-center py-6 px-3 mr-4 text-red-100 hover:text-green-800 text-4xl font-bold cursive tracking-widest"
          >
            Tailwind CSS
          </NavLink>
          <NavLink
            to="/post"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Blog
          </NavLink>
          <NavLink
            to="/project"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Projects
          </NavLink>
          <NavLink
            to="/about"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            About
          </NavLink>
        </nav>
        <div>
            
        </div>
      </div>
    </header>
  );
}

export default NavBar;

enter image description here

The <div> element is centered when I reduce the size of the screen.

enter image description here

Upvotes: 1

Views: 13617

Answers (1)

UXCODA
UXCODA

Reputation: 1226

Your class of mx-auto is actually doing its job just fine. The trouble is that the container class has a width of 100% and has a set max-width at each breakpoint so it appears that its not getting centered but its actually just very wide.

Its visibly working at 768px because the container width is 640px showing you 64px on either side but at say 1024px wide container has a max-width of 1024px so there wont be any space on either side.

I'd remove the breakpoints where you dont need the container to grow any higher in the Tailwind config file.

Upvotes: 2

Related Questions