tailwindcss + flexbox = CSS Nirvana - Part 1
Tags: tailwindcss, flexbox, ui, css
Published: 2019-11-30 21:55:59

---
title: tailwindcss + flexbox = CSS Nirvana - Part 1
published: true
description: In these series, I'll present some examples of how you can easily combine tailwindcss and flexbox to create amazing layouts without pain.
tags: tailwindcss, flexbox, ui, css
series: tailwindcss + Flexbox = CSS Nirvana,
cover_image: https://i.imgur.com/Q3RK3EK.png
canonical_url: https://maurogarcia.dev/maurogarcia.dev/posts/tailwindcss-plus-flexbox-equals-css-nirvana-part-1/
---

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](https://dev.to/maurogarcia_19/4-useful-snippets-for-tailwindcss-2115)
- [3 Reusable components with Angular and tailwindcss](https://dev.to/maurogarcia_19/3-reusable-components-with-angular-and-tailwindcss-45md) 
- [Sapper + Svelte + tailwindcss boilerplate](https://dev.to/maurogarcia_19/server-side-rending-with-sapper-svelte-and-tailwindcss-2bib)

#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 the [official website](https://tailwindcss.com/)

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:
![Two-column form - desktop](https://i.imgur.com/DokDRyI.png)

Mobile:
![Two-column form - mobile](https://i.imgur.com/JO2VePF.png)

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)

```html
<body class="p-4">
	<h1 class="text-5xl">Your form title</h1>
	<form class="flex flex-wrap bg-blue-500 p-4">
		<!-- Input container -->
		<div class="w-full md:w-1/2 p-4">
			<div class="bg-red-500 p-4">
				<label for="input1">Label</label>
				<input type="text" name="input1" class="w-full p-2" value="Hello world!">
			</div>
		</div>
		<!-- Input container -->
		<div class="w-full md:w-1/2 p-4">
			<div class="bg-red-500 p-4">
				<label for="input2">Label</label>
				<input type="text" name="input2" class="w-full p-2" value="Hello world!">
			</div>
		</div>
		<!-- Input container -->
		<div class="w-full md:w-1/2 p-4">
			<div class="bg-red-500 p-4">
				<label for="input3">Label</label>
				<input type="text" name="input3" class="w-full p-2" value="Hello world!">
			</div>
		</div>
		<!-- Input container -->
		<div class="w-full md:w-1/2 p-4">
			<div class="bg-red-500 p-4">
				<label for="input4">Label</label>
				<input type="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:
```html
<!-- Input container -->
<div class="w-full md:w-1/2 p-4">
```
For this:
```html
<!-- Input container -->
<div class="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👇