Tailwind Crash Course - Project Based Learning
Tailwind’s Numbering System
It’s actually quite simple.
1 rem = 4 in Tailwind (multiplied by 4)
Here we use the same example:
|
if the base font is 16px = 1rem = 4rem in Tailwind |
If you need a div to have 16px width, then you will use the class .w-4 |
|
If you need a div to have 20px width, then you will use the class 20px = 1.25rem = 5rem in Tailwind |
Width & Height
So, here is the formula for this class.
.{w|h}-{size}
You are going to use the same one for the width and height. There are three different categories for sizes.
|
Sizes |
||
|
Explicit Sizes |
0, 1, 2, 3, 4, 5, 6, |
+1 |
|
Percentages |
½… 1/{3,4,5,6,12} |
Every digit in fraction
|
|
Fixed sets |
Screen, full |
- Explicit sizes: These sizes with the actual numbers, they are equal to the rem x 4. So, 4 is 1rem which will be 16px. So, if you need a box that is 16px wider and 20px in height, then you will use
.w-4 .h-5 - Percentages (represented as fractions): If you need to take half of the page then you will use
1/2which is equal to 50%. - Fixed set sizes: If you need width and height of the entire screen, you will use fixed set
screenor usefullto take whole container.
Screen will be the height of the screen or width of the screen and full simple make container as big as it’s parent has space. So, in this particular case, it would be kind of equal to same as screen. But as we get further and further, you will see that full is slightly different than screen.
Let’s code an example.
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="">
<div class="bg-gray-500 w-32 h-32">Text</div>
<div class="bg-gray-800 w-3/12">Text</div>
<div class="bg-red-800 w-3/12">Text</div>
<div class="bg-orange-500 w-6/12">Text</div>
<div class="bg-teal-800 w-full">Text</div>
<div class="bg-purple-800 w-screen">Text</div>
</body>
</html>
Now, Let’ jump into the next lesson and start our very first challenge.
