Tailwind CSS Customization
Tailwind CSS is designed to be customized. While the default theme is excellent for many projects, you can easily change colors, fonts, spacing, and more to match your brand.
Customization happens in the tailwind.config.js file, which sits at the root of your project.
Extending the Theme
If you want to add new values to the default theme (like a new brand color or font size) without losing the defaults, use the extend section.
Once added, you can use these custom values just like any other utility. For example, bg-brand-blue or p-128.
Overriding the Theme
If you place your configuration directly inside theme (outside of extend), it will completely replace Tailwind's default configuration for that property. This can be useful if you want to strictly limit the available choices for your designers and developers.
Arbitrary Values
For one-off styles that don't belong in your theme, Tailwind provides arbitrary value syntax. You can wrap any value in square brackets [...] to generate a utility on the fly.
In the next page, we'll start exploring individual utility categories, beginning with Layout.