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.

js
Code kopiëren
Collapse
99
1
2
3
4
5
6
7
8
9
10
11
12
// tailwind.config.js
module.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.

html
Code kopiëren
Collapse
9
1
2
3
<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.

js
Code kopiëren
Collapse
99
1
2
3
4
5
6
7
8
9
10
11
12
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Helvetica', 'Arial', 'sans-serif'],
        serif: ['Georgia', 'serif'],
        mono: ['Courier New', 'monospace'],
      },
    },
  },
};

Then we switch to the HTML.

html
Code kopiëren
Collapse
9
1
2
3
<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.

js
Code kopiëren
Collapse
99
1
2
3
4
5
6
7
8
9
10
11
12
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
    },
  },
};

Usage in HTML.

html
Code kopiëren
Collapse
9
1
2
3
<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.