Tailwind Design System Configuration
Learn how to configure the Tailwind design system.
We'll cover the following
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.
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: