Tailwind Design System Configuration

It is possible that sometimes the color used in Tailwind CSS is not precisely the same as the one we supplied to it for our own custom CSS. This is because some colors are unavailable in the Tailwind CSS’s default design system configuration.

Custom configuration

This is actually one of the big advantages of Tailwind CSS. It can be configured to expose only those colors, margins, etc., that we want to allow according to our own application style.

To get started with a custom configuration, we need a tailwind.config.js configuration file.

The following command:

npx tailwindcss init

will create such a file at the root of the project. If you want to use a different name, you can specify it after init in the above command.

Now we can customize it to add our own color: