This paragraph uses the
font-sans
utility, which we've configured to use the 'Roboto' font.
It provides a clean and readable style for the main content of the page.
The key is to link 'Roboto' in the
<head>
and then map
font-sans
to it in the Tailwind configuration.
This text is styled with
font-accent
, which maps to the 'Raleway' font.
This demonstrates how you can define and use multiple distinct custom fonts for different
purposes within your design system.
Remember: All used fonts ('Roboto', 'Poppins', 'Raleway') must be linked in the
<head>
for them to display correctly.
The
fontFamily
array in the Tailwind config acts as a font stack, providing fallbacks if a preceding font is unavailable.