Tailwind CSS
/Intermediate
Font Family
Definition
Utilities for controlling the font family of an element.
Explain Like I'm New
Tailwind provides 3 default font stacks: - `font-sans`: Clean, modern, no curly feet (Arial/Helvetica style). - `font-serif`: Classic, curly feet (Times New Roman style), great for long articles. - `font-mono`: Typewriter style (Courier), where every letter is the exact same width. Used for code blocks.
Real World Example
A developer blog where the article is `font-sans`, but the code snippets are wrapped in `font-mono`.
Common Use Cases
- •Branding
- •Code formatting
- •Editorial design
Interactive Example
Interview Questions
basic
- What is the default font family class applied to the entire `<body>` in Tailwind?
intermediate
- How do you change the default `font-sans` to be a custom Google Font like 'Inter'?