- The Tailwind Configuration File
- Customizing Your Title Sizes
- Applying Your Custom Sizes in HTML
- A Quick Hack: Direct Pixel Values
- Wrapping Up
Tailwind CSS is known for its utility-first approach, which allows for a highly configurable design system without having to dive into piles of custom CSS. However, there might be times when the default utility classes just don't give you the exact look you want. Especially when it comes to typography, you might have a very specific pixel size in mind for your titles.
Don't worry! Tailwind has your back. Let's explore how to set specific pixel sizes for your h1-h6 titles using Tailwind's configuration.
The Tailwind Configuration File
The magic happens in the tailwind.config.js file. If you haven't set this up yet, you can generate it using:
npx tailwindcss init
This creates a minimal configuration file. We'll use this file to extend Tailwind's default settings.
Customizing Your Title Sizes
To change the sizes of the h1-h6 tags, dive into the theme section of the config file. You can extend the default font sizes by adding your own values.
Here's an example of how you can set custom sizes:
module.exports = {
theme: {
extend: {
fontSize: {
'h1': '48px',
'h2': '36px',
'h3': '30px',
'h4': '24px',
'h5': '20px',
'h6': '16px',
},
},
},
variants: {},
plugins: [],
}
In the example above, we've set h1 to be 48 pixels, h2 to be 36 pixels, and so on. Adjust the pixel values to whatever you need.
Applying Your Custom Sizes in HTML
Once you've defined your custom sizes, you can easily use them in your HTML:
<h1 class="text-h1">This is a custom-sized H1 title</h1>
<h2 class="text-h2">This is a custom-sized H2 title</h2>
<!-- ... and so on for h3 through h6 -->
A Quick Hack: Direct Pixel Values
While the above method is more structured and recommended, there's a quicker hack if you're in a hurry. Tailwind allows you to provide direct pixel values in the HTML:
<h1 class="text-[48px]">This is an H1 with 48px size</h1>
This can be handy for one-off situations, but for consistency and reusability, defining them in the config file is the way to go.
Wrapping Up
Tailwind CSS, with its highly customizable nature, lets you take design matters into your own hands. In this article we've shown how you can define your own custom styles for text sizes which you can then apply to your h-tags in HTML, as well as being able to apply fixed values directly as a class in your HTML.
Related articles
