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.

Then, when we added a custom color palette, we were ready to use it in the HTML.

Setting Custom Fonts

We can also customize the fonts in Tailwind CSS by adding new font families to the configuration file.

Then we switch to the HTML.

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.

Usage in HTML.

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.