Font Family

The CSS property font-family takes a list of font family names that the browser will use to render the text based on font availability.

In general, font families can be broadly categorized into:

• Serif fonts - Fonts that help improve readability in non-screen texts like in newspapers.

• Sans serif fonts - Fonts that help improve readability in screen texts like on a PC or a Macbook or even Androids and iPhones.

• Monospace fonts - Fonts that help improve readability in code.

TailwindCSS offers classes for all these font types - font-serif, font-sans, font-mono respectively.

If you want a one-off font family for a particular text, we can do so by specifying an arbitrary font family name within [] after font-

font-['Impact'] becomes font-family: 'Impact';
/* Spaces to be replaced with _ and use quotes like below */
font-['Times_New_Roman'] becomes font-family: 'Times New Roman';

Theming

TailwindCSS can be themed using tailwind.config.js The Font Family can be themed using theme.extend.fontFamily object. You can either override sans, serif, and mono if you want to continue using font-sans, font-serif, font-mono or if you want to include your own font-{suffix} you can do so too by specifying the suffix as key in theme.extend.fontFamily and value of type String | String[]

// Overriding 'font-sans' with String[] format
'sans': ['Helvetica', 'Arial', 'sans-serif'],

// Creating 'font-brand' with String format
'brand': 'Helvetica, Arial, sans-serif',

In the below example, I add a font-fancy class which will use cursive font family.

// tailwind.config.js
module.exports = {
  theme: { 
    extend: {
      fontFamily: {
        'fancy': 'cursive',
      }
    }
  }
}

Now let us put everything we've learned so far into action:

<p class="font-sans">Font Sans - The quick brown fox jumps over the lazy dog</p>
<p class="font-serif">Font Serif - The quick brown fox jumps over the lazy dog</p>
<p class="font-mono">Font Mono - The quick brown fox jumps over the lazy dog</p>
<p class="font-['Impact']">Arbitrary font Impact - The quick brown fox jumps over the lazy dog</p>
<p class="font-fancy">Font Fancy - The quick brown fox jumps over the lazy dog</p>

Customizing Default Font

By default, TailwindCSS's default theme Preflight's font-sans will be applied to the html element.

To have a different default font, you can either

1. Override font-sans in theme.fontFamily

2. Override it explicitly like below (don't worry about @layer base stuff for now, it will be covered in one of the articles later. Technically you can get away by not using it but it is the best practice, the "why" of it will be covered later).

    @layer base {
      html {
        font-family: Roboto, system-ui, sans-serif;
      }
    }
   

Font Size

The CSS property font-size sets the size of the font. Essentially, it lets you tell the browser how big you want your font to be displayed.

TailwindCSS has several in-built sizes which take the form text-{size} where size can be xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

We can also set an arbitrary value if required. Let's say we want our font-size to be 150px, we can set it as text-[150px]

Theming

We can theme the font sizes through theme.extend.fontSize object. Like with font family, we can override the existing built-in presets like base or add a completely new preset like huge

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        base: '15px', // overriding 'font-base'
        huge: '50px' // creating 'font-huge' with font-size: 50px;
      }
    }
  }
}

Let us now see all that we've learned in action

<p class="text-xs">Text Extra Small</p>
<p class="text-sm">Text Small</p>
<p class="text-base">Text Base/Regular</p>
<p class="text-lg">Text Large</p>
<p class="text-xl">Text Extra Large</p>
<p class="text-2xl">Text 2xl</p>
<p class="text-3xl">Text 3xl</p>
<p class="text-4xl">Text 4xl</p>
<p class="text-5xl">Text 5xl</p>
<p class="text-6xl">Text 6xl</p>
<p class="text-7xl">Text 7xl</p>
<p class="text-8xl">Text 8xl</p>
<p class="text-9xl">Text 9xl</p>
<p class="text-huge">Text Huge</p>
<p class="text-[150px]">150px Text</p>

Font Style

There are only two classes - italic and non-italic with the latter used to reset italic at different breakpoints or states which we'll see later.

<p class="non-italic">Non italic</p>
<p class="italic">Italic</p>

Font Weight

Arbitrary font-weights like font-[1100] are only applicable if the font supports it. Let us see the different font weights in action.

<p class="font-thin">Font Thin - 100</p>
<p class="font-extralight">Font Extra Light - 200</p>
<p class="font-light">Font Light - 300</p>
<p class="font-normal">Font Normal - 400</p>
<p class="font-medium">Font Medium - 500</p>
<p class="font-semibold">Font Semibold - 600</p>
<p class="font-bold">Font Bold - 700</p>
<p class="font-extrabold">Font Extra Bold - 800</p>
<p class="font-black">Font Black - 900</p>

Theming

Like others, you can theme font weight by theme.extend.fontWeight object. You can

1. Override existing font-weight presets like 'thin': '200'

2. Create a new font-weight preset like 'thick': '900'

Advanced

There are some rare-use cases where you might need to use Font Smoothing and Font Variant Numeric. It is left as an additional reading or an exercise.

Code

To make it easier to follow the series, I've created a Github Repository at AmitJoki/Learn-Tailwindcss

The code used in this article can be found here.

TailwindCSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

That's a lot of words to take in, isn't it? That's how TailwindCSS is defined by the official documentation.

Tailwindcss Documentation is excellent and should serve as your go-to manual for anything Tailwindcss. But its top-down structure, i.e. covering the high-level concepts first and then drilling down to the basics may intimidate people new to it.

In this series, we will take a bottom-up approach where we'll learn the rudimentary details in an opinionated structure and progress gradually to the high-level concepts. This helps in avoiding cognitive overload. Imagine having to write an essay on Shakespeare without knowing what the alphabets are!

I'll assume you have a basic working knowledge of CSS. If you want a refresher or are completely new to CSS and want to learn, you can do so with these excellent linked resources before hopping right back here to continue your journey towards mastering TailwindCSS.

1. Learn CSS - web.dev

2. Learn to style HTML using CSS

Classes

TailwindCSS is built on classes. We design by combining different classes. And what's more? TailwindCSS is clever enough to only include the styles for the classes we've used - which means faster load times, yay!

Let's take a quick look at what classes are.

The syntax of a class is as follows.

.className { /* It starts with a period followed by the class name */
   propertyName: proptertyValue;
   ....
   ....
}

A class is a way to combine different CSS properties and values under a single name. We can then apply all those styles to elements using the class attribute (or className attribute if you're working with React/JSX).

It is important to note we can add as many classes as we want, separated by a space and styles will be applied after rules of specificity are taken into consideration.

<div class="className anotherClassName"></div>

We now know the building blocks of TailwindCSS. It's just a bunch of different classes doing different things which when combined correctly can result in a beautiful design without having to write any of our own CSS.

Starting from the next article of the series, we will deep dive into the beautiful world of TailwindCSS and get some hands-on experience with its classes.