CODEWITHSUNDEEP
csstailwind-css
turtle
turtle

Reputation: 8073

Left align content inside a Tailwinds centered flex column

I have a centered column where I'd like to align some of the content inside this column to the left:

<div class="flex flex-col items-center justify-center">

  <!-- I would like all elements to be left aligned in this div -->
  <div class="items-start justify-start">
    <h1>Tailwind Elements</h1>
  </div>
  
</div>

How can I left align content in a flex column that is centered? I can not seem to make it work.

Upvotes: 0

Views: 915

Answers (1)

buzz
buzz

Reputation: 1106

Did you set width for the inner div? I set the width and used text-left and it seems to work

<div class="flex flex-col items-center justify-center">

  <!-- I would like all elements to be left aligned in this div -->
  <div class="w-[400px] text-left bg-red-500">
    <h1>Tailwind Elements</h1>
  </div>
  
</div>

Edit: you don't even have to use text-left as setting the width automatically sets all the items to be left aligned

Upvotes: 1

Related Questions