Get your vanilla CSS color variables in TailwindCSS

colors: {}

What does this site do?

It converts a CSS :root to a copy-pasteable JavaScript object you can plug into tailwind.config.js. This allows you to access your color variables in any TailwindCSS project with ease.

I have copied the result. Now what?

If you want to use the colors generated above AND TailwindCSS' default colors

Extend your color palette by adding the generated object to theme.extend on your tailwind.config.js. This means you can use all your colors, as well as TailwindCSS' default theme. This is the recommended option.

If you want to use STRICTLY the colors generated above

Overwrite default colors by adding the generated object to the theme on your tailwind.config.js. This will override TailwindCSS' default theme. You will lose access utilities such as text-zinc-800 and bg-transparent.

You can learn more by visiting TailwindCSS' documentation.