If you read some of my previous posts, you already know I've been using tailwindcss for my angular and svelte projects.

Here are some of my previous posts:

• 4 useful snippets for tailwindcss
• 3 Reusable components with Angular and tailwindcss
• Sapper + Svelte + tailwindcss boilerplate

Why I use tailwind?

Because I love the process of building my own user interfaces from scratch, but I don't want to deal with the pain that comes from having to write custom CSS, or thinking about what's the best name I can use for each element. With tailwind, you can build complex components in a breeze thanks to features like Pseudo-class variants and responsive utility variants.

If you want to know more about tailwindcss, check out theofficial website

One of the things I love the most about tailwind is how easy is to use flexbox layouts in my components. That's why I decided to create these series to share some common layout scenarios so you can drastically accelerate your development process. In this first post, I'll build a simple two-column responsive form.

Full disclaimer: I'll use ugly colors and styles for these components. I only want to be focused on the layout with flexbox.

Responsive two-column form

Let's say we need to build the following two-column form:

Desktop:

Mobile:

For this form, I'll use the following key tailwind utilities for my flexbox layout:

• flex (display: flex)
• flex-wrap: (flex-wrap: wrap) The flex container is multi-line. Flex items can wrap onto a new line.
• justify-between: (justify-content: space-between): Flex items are evenly distributed in the line.
• w-full (width: 100%)
• md:w-1/2 (width: 50% only if the screen width is greater than 768px)

<bodyclass="p-4"><h1class="text-5xl">Your form title</h1><formclass="flex flex-wrap bg-blue-500 p-4"><!-- Input container --><divclass="w-full md:w-1/2 p-4"><divclass="bg-red-500 p-4"><labelfor="input1">Label</label><inputtype="text"name="input1"class="w-full p-2"value="Hello world!"></div></div><!-- Input container --><divclass="w-full md:w-1/2 p-4"><divclass="bg-red-500 p-4"><labelfor="input2">Label</label><inputtype="text"name="input2"class="w-full p-2"value="Hello world!"></div></div><!-- Input container --><divclass="w-full md:w-1/2 p-4"><divclass="bg-red-500 p-4"><labelfor="input3">Label</label><inputtype="text"name="input3"class="w-full p-2"value="Hello world!"></div></div><!-- Input container --><divclass="w-full md:w-1/2 p-4"><divclass="bg-red-500 p-4"><labelfor="input4">Label</label><inputtype="text"name="input4"class="w-full p-2"value="Hello world!"></div></div></form></body>

As you can see, we can build this kind of multi-column responsive layouts using 4 or 5 key tailwindcss utilities. This is SO powerful! If you want to build a three-column form, you just need to add 1 utility:

Change this:

<!-- Input container --><divclass="w-full md:w-1/2 p-4">

For this:

<!-- Input container --><divclass="w-full md:w-1/2 lg:w-1/3 p-4">

Cool right?

Did you try tailwindcss? What do you think about it?

Did you dig into tailwind flex utilities? Let me know in the comments below👇