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.