Default Tailwind CSS do not come with the complete color palette. Some colors such as blue, pink, dark etc., works, but some such as violet, fuchsia will not be available. We need to import the colors that we want to use in our applications by configuring the tailwind.config.js file.

Since, Tailwind CSS is not yet providing official documentation for usage with Angular applications, here is what you can do to import the colors in an Angular 12/13 + applications.

First we need to import the colors from the Tailwind package like this (if you try to use the import command here, you may get “Cannot use import statement outside a module” error)

const colors = require('tailwindcss/colors')

Now, we can import the required colors like this

...
darkMode: 'media', // or false or 'class'
  theme: {
    extend: {
      colors: {
        'violet': colors.violet,
        'fuchsia': colors.fuchsia
      }
    },
  },
...

 

Then you can use the imported colors in your application by giving class names such as “bg-fuchsia-800”.