Customizing and Modifying the Default Theme
Tailwind CSS provides a highly customizable configuration file where you can modify the default theme to better fit your project's design requirements. This chapter will cover how to customize color palettes, set custom fonts, and adjust the spacing scale.
Note
To customize any default styles from Tailwind CSS, we must update the
tailwind.config.js
file.
Customizing Color Palettes
We can add new colors, extend existing ones, or completely override the default color palette.
js99123456789101112// tailwind.config.jsmodule.exports = {theme: {extend: {colors: {customBlue: '#1DA1F2',customGreen: '#17BF63',customRed: '#E0245E',},},},};
Then, when we added a custom color palette, we were ready to use it in the HTML.
html9123<div class="bg-customBlue text-white p-4">Custom Blue Background</div><div class="bg-customGreen text-white p-4">Custom Green Background</div><div class="bg-customRed text-white p-4">Custom Red Background</div>
Setting Custom Fonts
We can also customize the fonts in Tailwind CSS by adding new font families to the configuration file.
js99123456789101112// tailwind.config.jsmodule.exports = {theme: {extend: {fontFamily: {sans: ['Helvetica', 'Arial', 'sans-serif'],serif: ['Georgia', 'serif'],mono: ['Courier New', 'monospace'],},},},};
Then we switch to the HTML.
html9123<div class="font-sans text-lg">Sans-serif Font</div><div class="font-serif text-lg">Serif Font</div><div class="font-mono text-lg">Monospace Font</div>
Customizing Spacing Scale
Tailwind CSS provides a default spacing scale, but we can customize it to fit the design needs by adding or modifying spacing values in the configuration file.
js99123456789101112// tailwind.config.jsmodule.exports = {theme: {extend: {spacing: {'72': '18rem','84': '21rem','96': '24rem',},},},};
Usage in HTML.
html9123<div class="p-72 bg-gray-200">Padding 18rem</div><div class="p-84 bg-gray-300">Padding 21rem</div><div class="p-96 bg-gray-400">Padding 24rem</div>
Note
I think you have understood the principle. Any utility class can be extended with functionality in the configuration file. Documentation on this topic can be found here.
1. Which file do you edit to customize the Tailwind CSS theme?
2. How do you add a custom color in the Tailwind CSS configuration?
3. Which utility class would apply the custom color customPurple
defined in the configuration file?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.