Tailwind Font Family
In this article, we’ll dive deeper into Tailwind font family property with examples.
Tailwind font family class is a powerful utility that provides options for specifying a specific font family for an HTML element, or changing the default font family for an entire website.
With this class, you can easily customize the typography of your website without having to write custom CSS code.
Tailwind Font family Classes
| Classes | Overview |
| font-sans | It sets the font-family property to a sans-serif font stack for the element. |
| font-serif | A serif font family can be applied to an HTML element using this class. |
| font-mono | To apply monospaced fonts to HTML elements, this class is used. |
Tailwind font-sans
It sets the font-family property to a sans-serif font stack, which includes several fallback options such as “system-ui“, “BlinkMacSystemFont“, “-apple-system“, “Segoe UI”, “Roboto”, “Helvetica Neue”, “Arial”, “Noto Sans”, “sans-serif”, “Apple Color Emoji”, and “Segoe UI Emoji”.
Syntax
<element class="font-sans">....</element>
This example provides a clear demonstration of the font-sans class in Tailwind CSS:
Example:
Tailwind font-serif
This class can be used to apply a serif font-family like “ui-serif”, “Georgia”, “Cambria”, “Times New Roman”, “Times, serif”, etc.
Syntax
<element class="font-serif">....</element>
The following example provides an brief overview of the font-serif class in Tailwind CSS:
Example:
Tailwind font-mono
This class is used to set the font of an element to a monospaced font-family such as “ui-monospace”, “SFMono-Regular”, “Menlo”, “Monaco”, “Consolas”, “Liberation Mono”, “Courier New, monospace”, etc.
Syntax
<element class="font-mono">....</element>
Below example presents a scenario where the font-mono class is implemented:
Example:
Example Explanation
In Above example body class “text-center mx-4 space-y-2” defines the text to be centered, margin on the x-axis to be 4, and spacing between elements to be 2.
The h1 element has a class “text-gray-600 text-2xl font-semibold“, which defines the text color to be gray, font size to be 2xl (which is equivalent to 24px), and font weight to be semibold.
The first paragraph has a class “font-medium my-4 text-slate-700“, which sets the font weight to medium, adds a margin-top of 4, and sets the text color to slate 700.
The second paragraph has a class “font-medium text-gray-500 my-2 text-sm“, which sets the font weight to medium, sets the text color to gray 500, adds a margin-top of 2, and sets the font size to small (which is equivalent to 14px).
The div element has a class “mx-24 bg-gray-200 rounded my-2“, which sets the margin on the x-axis to 24, sets the background color to gray 200, adds rounded corners to the element, and adds a margin-top and margin-bottom of 2.
The nested paragraph inside the div has a class “font-mono p-4 font-medium“, which sets Tailwind font family to monospace, adds a padding of 4, and sets the font weight to medium. The text content of the paragraph is “MrExamples: Learning through examples“.
