css Question posted in
Some basic documentation can be found here.

How to align items to center on mobile and left on desktop in tailwind css

I tried some thing like this

<div className="flex w-full lg:justify-start md:justify-center sm:justify-center sm:items-center">
  <Button title={data.title as string}></Button>
</div>

But it is always left aligned on mobile. It should be center on mobile and left on desktop

Tags:

2

Answers


  1. 0 
    <div className="flex w-full sm:justify-center lg:justify-start">
  <Button title={data.title as string}></Button>
</div>

    make sure to add the flex class to the parent container to enable flexbox behavior

    Login or Signup to reply.
  2. 0

    In the div, use 'class' instead of 'className' and insert justify-center as a class.

    <div class="flex justify-center w-full lg:justify-start md:justify-center sm:justify-center sm:items-center">
  
<Button>Hi!!!!</Button>
</div>

    See live: https://play.tailwindcss.com/B0S7FRrWIY

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search