tailwindcss + flexbox = CSS Nirvana - Part 1
tailwindcss flexbox ui css
Series:
1tailwindcss + flexbox = 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
- 3 Reusable components with Angular and tailwindcss
- Sapper + Svelte + tailwindcss boilerplate
Why do 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
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)
<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:
<!-- Input container -->
<div class="w-full md:w-1/2 p-4">For this:
<!-- Input container -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">Cool right?