Understanding the Tailwind Config File
The tailwind.config.js file is where you customize your design system. You can control colors, spacing, fonts, breakpoints, and more from this central place.
Example:
module.exports = {
theme: {
extend: {},
},
plugins: [],
}
Extending Colors
You can add your own custom colors or override default ones to match your brand design.
Example:
module.exports = {
theme: {
extend: {
colors: {
primary: ‘#1E40AF’,
secondary: ‘#F59E0B’,
},
},
},
}
<button class=”bg-primary text-white px-4 py-2″>
Custom Color Button
</button>
Customizing Fonts
Tailwind allows you to define custom font families for consistent typography across your project.
Example:
module.exports = {
theme: {
extend: {
fontFamily: {
sans: [‘Poppins’, ‘sans-serif’],
},
},
},
}
<p class=”font-sans”>Custom Font Applied</p>
Adding Custom Spacing & Sizes
You can extend spacing values to create consistent margins, padding, widths, and heights.
Example:
module.exports = {
theme: {
extend: {
spacing: {
‘128’: ’32rem’,
},
},
},
}
<div class=”w-128 bg-gray-200″>Custom Width</div>
Creating Custom Animations & Utilities
You can define your own animations, keyframes, or even plugins to extend Tailwind’s functionality.
Example:
module.exports = {
theme: {
extend: {
keyframes: {
slideIn: {
‘0%’: { transform: ‘translateX(-100%)’ },
‘100%’: { transform: ‘translateX(0)’ },
},
},
animation: {
slide: ‘slideIn 0.5s ease-out’,
},
},
},
}
<div class=”animate-slide bg-blue-300 p-4″>
Slide Animation
</div>
