Tailwind CSS Theme
Customize Tailwind default theme or create a new theme for your projects
theme section of your
tailwind.config.js file is where you define your project’s
color palette, type scale, fonts, breakpoints, border radius values, and
You can customize theme in Tailwind in a two similiar ways: by extending default values or editing them.
Extending the default theme
Extending the default theme preserves values already made by Tailwind.
Just add your extensions under the
extend key in the theme
section of your configuration file. This particular case below is showing
how to add an extra breakpoint but save the existing ones at the same
Overriding the default theme
Overriding the default theme completely replace options already made by
Tailwind. Just add your overrides directly under the
theme section of your configuration file. This particular
case below is showing how completely replace Tailwind’s default
configuration for that key, so in the example below none of the default
opacity utilities would be generated.
You can of course both override some parts of the default theme and extend other parts of the default theme within the same configuration.