CODEWITHSUNDEEP
javascripthtmlreactjstailwind-cssvite
yieniggu
yieniggu

Reputation: 404

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

Upvotes: 1

Views: 251

Answers (2)

kaleab tadesse
kaleab tadesse

Reputation: 11

Tailwind doesn't automatically center content, but it might be from vite's default styling in the style.css file. Be sure to check the boilerplate styling in the style.css file.

Upvotes: 1

krishnaacharyaa
krishnaacharyaa

Reputation: 24940

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

Upvotes: 1

Related Questions