Tailwind Crash Course - Project Based Learning
Text Size
Firstly let me remind you that we already have talked about the numbering system and we have talked about how it uses rem. So, we already know that the base font size is 16px which is just called base. Let’s take a look at the formula and the table below to understand it in a simple way.
Formula:
.text-{size}
|
Sizes |
rem |
Pixels |
|
|
xs |
xtra small |
.75 rem |
12 px |
|
sm |
small |
.875 rem |
14 px |
|
base |
base |
1 rem |
16 px |
|
lg |
large |
1.125 rem |
18 px |
|
xl |
xtra large |
1.25 rem |
20 px |
|
2xl |
1.50 rem |
24 px |
|
|
3xl |
1.875 rem |
30 px |
|
|
4xl |
2.25 rem |
36 px |
|
|
5xl |
3 rem |
48 px |
|
|
6xl |
4 rem |
64 px |
Now by following our formula to style text-size, we will write it like .text-sm which means text size 14px or text-xl to make text 20px large.
