tailwind: customize a xxx base color without loosing clases like xxx-100, xxx-200

Question

I want to define a text-blue color in tailwind.css without loosing text-blue-100, text-blue-200, etc.

I follow this guide: https://tailwindcss.com/docs/customizing-colors#extending-the-defaults

and I try with:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: '#5F99F7'
      }
    }
  }
}

But all the text-blue-xxx disapear

Any way to solve it?

Answer 1

You need to use the DEFAULT keyword if you want the class to be text-blue. You also need to make blue an object.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          'DEFAULT': '#5F99F7'
        },
      }
    }
  }
}