Tailwind Css Font Families Sizes And Weights Complete Guide
Online Code run
Step-by-Step Guide: How to Implement Tailwind CSS Font Families, Sizes, and Weights
Setup
Ensure your tailwind.config.js file is configured to include the necessary fonts you wish to use. If you are using custom fonts, you might need to set them up in this configuration file. For simplicity, we'll use Google Fonts with Tailwind CSS. Here’s an example configuration:
- Include fonts via a CDN or importing CSS:
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
- Update
tailwind.config.jsto use these fonts:
module.exports = {
theme: {
extend: {
fontFamily: {
'roboto': ['Roboto', 'sans-serif'],
}
},
},
variants: {},
plugins: [],
}
Example 1: Using Default Font Size and Weight
In this example, we will use Tailwind's default font size and weight classes to style a simple text element.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/path/to/output.css">
</head>
<body class="p-6">
<p class="text-base font-medium">Hello, this is a paragraph with a medium font weight and base font size.</p>
</body>
</html>
text-base: This applies the default base font size (usually around 16px).font-medium: This applies a medium font weight (usually around 500).
Example 2: Customizing Font Family, Size, and Weight
Now we will customize the font family, size, and weight of a text element using the config.fontFamily, config.fontSize, and config.fontWeight settings.
- Configure fonts, sizes, and weights in
tailwind.config.js:
module.exports = {
theme: {
extend: {
fontFamily: {
'roboto': ['Roboto', 'sans-serif'],
},
fontSize: {
'custom-large': ['3rem', '3.5rem'],
},
fontWeight: {
'custom-bold': 900,
},
},
},
variants: {},
plugins: [],
}
- Use those custom classes in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/path/to/output.css">
</head>
<body class="p-6">
<h1 class="text-roboto text-custom-large font-custom-bold">This Heading has a custom font family, size, and weight.</h1>
</body>
</html>
text-roboto: This changes the font family to Roboto.text-custom-large: This sets the font size to 3rem with line height of 3.5rem. Custom sizes are generated from thefontSizesection in the configuration.font-custom-bold: This sets the font weight to 900, which is defined as a custom weight in the configuration.
Example 3: Applying Responsiveness to Font Size and Weight
Tailwind CSS provides powerful responsive utilities for font properties. Let’s make our text bigger on large screens and change its weight conditionally.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/path/to/output.css">
</head>
<body class="p-6">
<div>
<h2 class="text-2xl md:text-4xl font-bold sm:font-normal">This Heading scales and changes font weight based on screen size.</h2>
</div>
</body>
</html>
text-2xl: This sets the text to 2xl (extra large) size on small screens.md:text-4xl: On medium (md) screens and larger, it switches to 4xl (larger extra large) size.font-bold: This sets the font weight to bold on smaller screens.sm:font-normal: On small (sm) screens and larger, it sets the font weight to normal.
Example 4: Using Arbitrary Values for Font Family, Size, and Weight
If you want to use specific values that aren’t predefined in the config file, Tailwind allows you to use arbitrary values directly within the classes.
HTML:
Top 10 Interview Questions & Answers on Tailwind CSS Font Families, Sizes, and Weights
Top 10 Questions and Answers on Tailwind CSS Font Families, Sizes, and Weights
1. What is the default font family in Tailwind CSS?
Answer: The default font family in Tailwind CSS is system-ui, which is part of Tailwind's default theme. This ensures that your fonts are optimized for each operating system. You can also specify your own font families if needed.
2. How do you change the font family using Tailwind CSS?
Answer: To change the font family in Tailwind CSS, you can use utility classes like font-sans, font-serif, font-mono, or custom classes defined in tailwind.config.js. For example, to apply a sans-serif font, you would use <p class="font-sans">...</p>.
3. How can I add custom font families in Tailwind CSS?
Answer: To add custom font families, you need to extend the theme.fontFamily section in your tailwind.config.js file. Here's an example:
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'sans': ['Inter', 'system-ui', 'sans-serif'],
'serif': ['Merriweather', 'serif'],
},
},
}
4. What are the standard font sizes in Tailwind CSS?
Answer: Tailwind provides a wide range of font size utilities like text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, and more. You can also define custom font sizes in your tailwind.config.js.
5. How do I apply a specific font size in Tailwind CSS?
Answer: To apply a specific font size, you use utility classes such as text-lg for large text, text-xl for extra large, etc. For example, <h1 class="text-3xl">Hello World</h1> sets the font size to 2rem.
6. Can I customize font sizes in Tailwind?
Answer: Yes, you can customize font sizes in your tailwind.config.js. Here’s how you can extend the default sizes:
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'14': '14px',
'7xl': '6rem',
}
}
}
}
7. What are the default font weights available in Tailwind CSS?
Answer: Tailwind CSS provides several font-weight utilities like font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, etc.
8. How do I use a custom font weight?
Answer: You can add custom font weights in the tailwind.config.js file under theme.fontWeight:
// tailwind.config.js
module.exports = {
theme: {
fontWeight: {
'hairline': 100,
'extra-light': 200,
'thin': 300,
'extrabold': 900,
},
},
}
9. How can I apply a font style (italic, oblique) in Tailwind CSS?
Answer: To apply a font style, you can use the italic or oblique utility:
- For italic text:
<p class="italic">This is italic text.</p> - For oblique text:
<p class="oblique">This is oblique text.</p>
10. Can I use a combination of font family, size, and weight in one class?
Answer: Yes, Tailwind CSS allows for extensive utility-class combinations. For example:
<p class="font-serif text-lg font-bold">This is large, bold serif text.</p>
Combining utility classes like this keeps your markup clean while applying complex styling.
Login to post a comment.