Multi column layouts for Rails with TW3.

We’ve all been there: there’s a page that is mostly text we need to render as 2 or more columns from our Rails app. Think Terms of Service and Privacy Notice. But we either need a separate javascript library (eew), or we try flexbox and have to divide that text into segments that may or may not be the right length (groan!).

Tailwind 3 makes rendering multiple columns absurdly easy. Just add columns-n as a class to the enclosing div and where n is the number of columns you want your text to wrap.

Like so:

<div class="relative font-serif text-base text-justify columns-1 sm:columns-3 gap-6">
      <p>Expedita quo ea quod laborum ullam ipsum enim. Deleniti commodi et. Nam id laborum placeat natus eum. Aliquid aut aut soluta nesciunt culpa magni. Velit possimus autem et aut repudiandae culpa rerum. Qui blanditiis ut qui quia expedita necessitatibus sed. Autem sed ut saepe doloremque aut placeat voluptas ipsum.</p>
      <p class="mt-6">Eligendi error nisi recusandae velit numquam nihil aperiam enim. Eum et molestias. Id qui cum veritatis id ea quidem ea rerum saepe. Iste itaque fugiat sequi. Voluptatem quae minus. Maxime ullam ea praesentium recusandae vero est quas. Quia minima fugiat aut laborum impedit facere autem sit qui. Et eos et ullam necessitatibus. Ut voluptatem saepe natus itaque maiores sit repellat aut natus assumenda.</p>
      <p class="mt-6">Blanditiis ipsa officia dolores exercitationem nemo beatae voluptatem eos rerum velit asperiores. Non quisquam accusantium officia nisi eius necessitatibus.</p>
      <p class="mt-6">Quaerat quia ad voluptatem laudantium natus. Aut ipsa et numquam delectus aliquam. Recusandae libero consequatur dolorum. Animi culpa rerum molestiae ut non et molestias aliquid aut nemo. Sint dolorem dolorem. Iure dolorum amet ea sit perferendis.</p>
      <p class="mt-6">Et illum ut officia nisi commodi. Quia et mollitia possimus modi. Delectus aliquid quam eos consectetur.</p>
      <p class="mt-6">Accusantium et et qui non sed modi. Corrupti deserunt culpa eos vitae neque aperiam. Repellat tenetur fugit.</p>
      <p class="mt-6">Deleniti distinctio ad corrupti nisi. Mollitia qui est natus cumque. Officia dolor qui perferendis necessitatibus saepe excepturi asperiores quos voluptas. Est suscipit facere nihil expedita suscipit quibusdam. Quod cupiditate vero distinctio. Sed est soluta nostrum magnam et saepe blanditiis aut. Vero dolores repellendus et libero minima explicabo provident. Culpa aut dolorem est.</p>
</div>

You can play with this here:
https://play.tailwindcss.com/nGpXy6MIgu?size=330x720

In this case for as soon as the screen size is larger than the small breakpoint, wrap these <p> elements into 3 columns. Columns support setting a gap-x between columns, and columns can be calculated automatically, or by column width. Breakpoints in the column flow can be set with break-before, break-after and less useful break-inside

Columns are not limited to text. you can create columns of images, text, and images, any sort of content that before was limited to 1 column.

And as with the rest of Tailwind 3, all arbitrary values such as columns-[10rem] can be coded in the HTML and compiled when the page loads.