0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
2 minute read
No comments

Tailwind CSS tutorial #15: Font Family

Jamie Redman
November 18, 2022
tailwind-css-tutorial-#15:-font-family
Total
1
Shares
1
0
0

In the article, we will go into detail on how to use font-family.

Font Family

Format

flex-{sans|serif|mono}

Alignment Tailwind Class CSS Property
Sans font-sans font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
Serif flex-row-reverse font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
Mono flex-col font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

let’s see each of this in action,

Font-Sans

This class is used to apply a websafe sans-serif font family, like ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI“, Roboto, “Helvetica Neue“, Arial, “Noto Sans“, sans-serif, “Apple Color Emoji“, “Segoe UI Emoji“, “Segoe UI Symbol“, “Noto Color Emoji“, etc. 

   class="flex items-center justify-between px-4 py-2">
    

       class="font-sans font-light text-5xl align-middle mb-2">Font Sans

       class="font-sans text-md leading-tight">Rex is the Mayor of Binaryville and a well-loved personality in town. He rose to robotdom from a microprocessor plant on the south side of town, where many famous and influential robots before him were conceived.

       class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"> class="font-bold">font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-sans

Output:
Image description

Font-Serif

This class is used to apply a websafe serif font-family like ui-serif, Georgia, Cambria, “Times New Roman“, Times, serif, etc. 

   class="flex items-center justify-between px-4 py-2">
    

       class="font-serif font-light text-5xl align-middle mb-2">Font Serif

       class="font-serif text-md leading-tight">Dolores robot is a computational genius who performs calculations for various Binaryville businesses and organizations. In her spare time, Dolores has been noodling on the creation of the perfect web browser that will make all other browsers obsolete. We're rooting for you, Dolores!

       class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"> class="font-bold">font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-serif

Output:
Image description

Font-Mono

This class is used to apply a websafe monospaced font-family like ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono“, “Courier New“, monospace, etc. 

  class="flex items-center justify-between px-4 py-2">
    

       class="font-mono font-light text-5xl align-middle mb-2">Font Mono

       class="font-mono text-md leading-tight">Bubble Gum robot, or “Bubbles” for short, is from a family of track-footed robots that ¬originated from an experiment melding candy vending machines with robotics in the early 1980s. Bubbles is a favorite of Binaryville, not just because she generously dispenses candy, but also because she has one of the more "bubbly" personalities of the villagers.
  
       class="text-xs font-mono font-light leading-tight text-gray-500 mt-2"> class="font-bold">font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
class="text-xs font-semibold font-mono whitespace-nowrap px-2 py-1 ml-5 rounded text-white bg-pink-500 rounded-2">font-mono

Output
Image description

Full code:
The overall code will be attached to repo link.

Overall Output
Image description

Resources:
tailwind.css

Thank you for reading :), To learn more, check out my blogs on Flex Direction, Hackathons and Flex Wrap.
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.

Keep learning! Keep coding!! 💛

Total
1
Shares
Share 1
Tweet 0
Pin it 0
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
using-rossum.ai-to-superpower-ocr-with-machine-learning

Using Rossum.ai to superpower OCR with machine learning

November 18, 2022
Next Post
in-one-minute-:-maven

In One Minute : Maven

November 18, 2022
Related Posts