CODEWITHSUNDEEP
cssflexboxtailwind-css
M.K. Kim
M.K. Kim

Reputation: 531

How to use flex in tailwind

I have 3 column page made with tailwind css and I wan to move the first column on top of 2nd column when screen size is less than '2xl' in tailwind while the 3rd col is hidden at xl breakpoint

<div className="relative z-0 flex overflow-hidden flex-grow">
          {/* Start first column */}
        <aside className="relative 2xl:order-first 2xl:flex-col flex-shrink-0 w-96 border-r border-gray-200 overflow-y-auto">
          <div className="absolute inset-0 py-6 px-1">           
          </div>
        </aside>
          {/* End first column */}
          {/* Start main area*/}
        <main className="flex-1 relative z-0 overflow-y-auto focus:outline-none">
          <div className="absolute inset-0 py-6 px-4 sm:px-6 lg:px-8">
          </div>
        </main>
          {/* End main area */}
        {/* Start third column */}
        <aside className="hidden xl:order-last xl:flex xl:flex-col flex-shrink-0 border-r border-gray-200 w-96">
          <div className="inset-0 py-6 px-1"></div>
        </aside>
        {/* end last column */}
      </div>

any suggestions or solutions will be appreciated

Upvotes: 1

Views: 4609

Answers (1)

kenshuri
kenshuri

Reputation: 532

If I understand the need correctly, we have to:

  • Make the layout responsive so that 1 column layout is used until breakdown xl, 3 columns until layout 2xl and 2 columns after
  • Hide the 3rd column after breakdown xl

You can definitely achieve this with out of the box tailwind css

  • With pure: flex playing with the width of the columns
  • With grid layout: better IMHO as it is more stable, you can easily add gap without destroying the layout

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-blue-100">

    <div class="text-xl p-4">Pure Flex solution</div>
    <div class="flex flex-row flex-wrap bg-red-400 p-4">
        <div class="w-full xl:w-1/3 2xl:w-1/2 p-4 bg-yellow-400">
            Column 1
        </div>
        <div class="w-full xl:w-1/3 2xl:w-1/2 p-4 bg-gray-400">
            Column 2
        </div>
        <div class="w-full xl:w-1/3 2xl:hidden p-4 bg-blue-400">
            Column 3
        </div>
    </div>
    
    <div class="mt-4 text-xl p-4">Grid solution</div>
    <div class="grid grid-cols-1 xl:grid-cols-3 2xl:grid-cols-2 gap-4 p-4 bg-pink-400">
        <div class="w-full p-4 bg-yellow-400">
            Column 1
        </div>
        <div class="w-full p-4 bg-gray-400">
            Column 2
        </div>
        <div class="w-full 2xl:hidden p-4 bg-blue-400">
            Column 3
        </div>
    </div>
    
    <div class="mt-4 text-xl italic p-4">Other understanding of the need</div>
    <div class="grid grid-cols-1 2xl:grid-cols-3 gap-4 p-4 bg-purple-400">
        <div class="w-full p-4 bg-yellow-400">
            Column 1
        </div>
        <div class="w-full p-4 bg-gray-400">
            Column 2
        </div>
        <div class="w-full xl:hidden 2xl:grid p-4 bg-blue-400">
            Column 3
        </div>
    </div>
</body>

Upvotes: 3

Related Questions