Tailwind Crash Course - Project Based Learning
Flexbox
🛎️ Most Important Topic
Flexbox allow us to do some pretty cool stuff with Tailwind. This is a very powerful tool but this is very confusing if this a is first time that you are taking a loot at it. Hopefully, you know a little-bit about flex and this will just be a review for you. So lets start with the base .flex class.
If you give a class .flex, it simply returns that into a flex container.
Let’s code something to understand it. I have a basic code setup ready without .flex.
<!-- example 1 without using flex-->
<div class=""> <!-- let’s call it wrapping div-->
<div class="bg-yellow-600 w-16 h-16">1</div>
<div class="bg-teal-700 w-16 h-16">2</div>
<div class="bg-red-700 w-16 h-16">3</div>
</div>
<!-- you can see that three boxes are written inside a wrapping div-->In result 👇, boxes are on top of each other.
Now we will add .flex to the wrapping div.
<!-- example 1 without using flex -->
<div class=“flex”> <!-- wrapping div-->
<div class="bg-yellow-600 w-16 h-16">1</div>
<div class="bg-teal-700 w-16 h-16">2</div>
<div class="bg-red-700 w-16 h-16">3</div>
</div>
<!-- you can see that three boxes are written inside a wrapping div-->After giving .flex class to the wrapping div, you can see 👇 that boxes are basically next to each other:
