Tailwind Crash Course - Project Based Learning
Font Family
Here we will learn, how to style text with TailwindCSS.
Let’s start with font family. There are major 3 families that you can use with Tailwind. That is sans which could be sort of Helvetica or similar, serif which is something like Times New Roman or similar to that & mono which would be Monospace.
Tailwind formula for font family:
.font-{family}
Families |
|
sans serif mono |
Helvetica or similar Times New Roman or Similar Monospace or similar |
Here is a code example to add font family in our paragraph.
<p class=“font-mono”>There are many variations of passages of Lorem Ipsum.</p>
Pretty simple 😎. Right?
Now one thing to know, if you apply font-mono
or any other font family to the body tag, any of the surrounding <p>
tags will also contain that font. So you don’t have to add font-family
bunch of times.