If your project requires a more custom shape or just a more organized structure, Tailwind offers very simple solutions to set up a global theme.
All properties bound to theme are in Tailwind config file located in the
root of your project:
tailwind.config.js. There you define your
project’s color palette, type scale, fonts, breakpoints, border radius
values, and more.
Code below is an example of how this file would look like. Configuring theme is unnecessary because Tailwind provide default values for most of the useful properties.
About particular names of properties used in example below you can read more in Taiwind documentation - in section Configuration references.
For a complete list of theme options (or reference for your changes) you can see default settings for Tailwind theme.
Structure for configuration contains the
theme object which
includes following keys:
corePlugins section lets you completely disable classes
that Tailwind would normally generate by default if you don’t need them
for your project. For more information check out the
Core Pugins section
in Tailwind documentation.
screens key allows you to customize the responsive
breakpoints in your project.
For more informations check out Tailwind documentation about breakpoint customization.
colors key allows you to customize the global color palette
for your project.
For more informations check out Tailwind documentation about colors customization.
spacing key allows you to customize the global spacing and
sizing scale for your project.
For more informations check out Tailwind documentation about spacing customization.
Customizing the default theme
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 time.
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.