Tailwind H1 H4 Config
User
define h1,h2,h3,h4 sizes and font in config js twailwind
Assistant
To define the `h1`, `h2`, `h3`, `h4` sizes and fonts in your `tailwind.config.js`, you can use the `extend` property in the `theme` object. This allows you to customize your typography settings by extending the existing styles or adding new ones.
Here’s how you can do it:
### Example `tailwind.config.js` for H1-H4 Styling
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx}', // Add paths to your files
'./resources/**/*.blade.php', // For Laravel projects
],
theme: {
extend: {
fontSize: {
h1: ['2.25rem', { lineHeight: '2.5rem' }], // 36px font size, 40px line height
h2: ['1.875rem', { lineHeight: '2.25rem' }], // 30px font size, 36px line height
h3: ['1.5rem', { lineHeight: '2rem' }], // 24px font size, 32px line height
h4: ['1.25rem', { lineHeight: '1.75rem' }], // 20px font size, 28px line height
},
fontFamily: {
heading: ['"Inter"', 'sans-serif'], // Define a custom font family
},
},
},
plugins: [],
};### Usage in HTML/Components
You can now apply these styles in your HTML or Vue components using the `text-{size}` and `font-{family}` classes.
#### Example:
<h1 class="text-h1 font-heading">This is an H1</h1>
<h2 class="text-h2 font-heading">This is an H2</h2>
<h3 class="text-h3 font-heading">This is an H3</h3>
<h4 class="text-h4 font-heading">This is an H4</h4>### Explanation:
1. **`fontSize`**: Defines custom sizes for `h1`, `h2`, `h3`, and `h4`. Each size can also include a specific `lineHeight`.
2. **`fontFamily`**: Sets a specific font family for headings. Replace `"Inter"` with the font of your choice.
3. **Classes**: Use `text-h1`, `text-h2`, etc., to apply the defined sizes, and `font-heading` for the font family.