Search code examples
javascripthtmlreactjstailwind-cssvite

How to prevent tailwind from centering content automatically?

I'm currently trying tailwindcss along with Vite and recently something is being super annoying and couldn't find a solution yet.

Looks like tailwind automatically centers the content and I'm struggling on working with flex components due to this.

This is a code piece from what I'm using, it's very simple but you can see that the content is being centered from default and can't change that behavior yet D:

export const Home = () => {
  return (
    <div>
      Wow
    </div>
  );
};

This is what it looks like

enter image description here

And if I try to use a combination of flex components it looks like this:

enter image description here

Solution

  • Tailwind-css doesn't center the element by default.

    I suspect this is being observed , because the parent of Home() component has a flex property which is center, so divs of Home() component is taking the center of the screen

    Or

    Maybe Vite in the boilerplate, Check the boilerplate once, as Vite boilerplate usually centers the div elements