Search code examples
tailwind-csstailwind-ui

Tailwind align text left but centered in div

I'm starting out with Tailwind and Rails to build a blog page.

I have left-aligned my text on all screen sizes (sm-xl). However, on screensizes >md I want the text to be left-alight and positioned in the center of the page. (Not md:text-center as this center-aligns the text.)

application.html.erb code:

<body class="mx-auto"> **TAILWIND**
<div>
  <%= render 'shared/navbar' %>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
    <div class="px-10 pb-20 md:max-w-2xl "> **TAILWIND**
     <%= yield %>
    </div>
  </div>
<%= render 'shared/footer' %>

This is how the page renders on small screens:

enter image description here

This is how the page renders on large screens: enter image description here

I have tried these combinations and none have worked:

  • div class="px-10 pb-20 md:text-center"
  • div class="px-10 pb-20 md:items-center"
  • div class="px-10 pb-20 md:max-w-2xl md:inline-block md:text-left"
  • div class="px-10 pb-20 place-content-center"
  • div class="px-10 pb-20 max-w-md mx-auto"
  • div class="px-10 pb-20 mx-auto md:text-left max-w-md md:max-w-non"

Thanks in advance.

Solution

  • Put a flex wrapper around them and apply md:justify-center on it.