Search code examples
tailwind-cssresponsivebreakpoints

Tailwind breakpoint not working to specify width on small screens and above

I have a small flex container with a text and two buttons inside

On mobile I want each element to be stacked in column and the buttons to take the full width of the container.

On wider screens it should all be on the same row with the text being at the left and the two buttons at the right, with some spacing in between.

But instead, on wider screens, after making the mobile layout as desired, the buttons on the right became a bit too wide and the spacing between them is gone, making them stuck to each other.

This is the code (which for the very most part I'm just tweaking as it was written by someone else in my team):

<div class="align-center sm:h-50 flex-col sm:flex-row py-30 sm:py-0 flex items-center border-b border-gray-50 px-10 sm:px-30 ">
<div style="flex-basis: 70%; class=">
<p class="text-md p-0 mt-0">Baby Baby</p>
</div>
<div style="flex-basis: 15%;" class="w-full">
<a class="outline-none focus:outline-none flex sm:w-100 text-xs rounded-full bg-primary-400 text-white p-5 focus:outline-none no-underline"">
<p class="font-pt-sans font-bold m-auto">Send e-mail</p>
</a>
</div>
<div style="flex-basis: 15%;" class="w-full">
<button class="w-full outline-none focus:outline-none flex flex-col flex-none  flex-col text-xs rounded-full text-gray-400 border p-5" type="button">
<p class="font-pt-sans font-bold m-auto">Copy link</p>
</button>
</div>
</div>

I found that the culprit for the faulty layout on wider screens is sm:w-100 here:

<a class="outline-none focus:outline-none flex sm:w-100 text-xs rounded-full bg-primary-400 text-white p-5 focus:outline-none no-underline"">

I need the w-100 to only apply from small screens and above. But for some reason it doesn't apply it at all, the only way for it to work is to remove the sm breakpoint. But then it also applies this width for mobile, which I don't want.

What am I missing here? I've read through the documentation and other similar questions but can't figure it out. Thank you.

Solution

  • There is too much not needed code there to achieve what you want.

    You can do it by simplifying it a lot and this is how you do it:

    <div class="flex w-full flex-col items-center justify-center space-y-4 space-x-0 md:flex-row md:space-x-4">
  <p class="flex-1 text-center md:text-start">Baby Baby</p>
  <button class="font-pt-sans w-fullitems-center flex w-full justify-center rounded-full border p-5 text-xs font-bold text-gray-400 outline-none focus:outline-none md:w-auto" type="button">Send Email</button>
  <button class="font-pt-sans w-fullitems-center flex w-full justify-center rounded-full border p-5 text-xs font-bold text-gray-400 outline-none focus:outline-none md:w-auto" type="button">Copy link</button>
</div>

    You can play with it here: https://play.tailwindcss.com/zA2Rn1LYEv?size=476x720

    Also please read about breakpoints and responsive design here: https://tailwindcss.com/docs/responsive-design#overview

    This is how it looks on big screens: Big Screens

    This is how it looks on small screens:

    Small Screens