Add Custom Color To TailwindCSS - gecko-8/devwiki GitHub Wiki

Up

1. If you haven't created a tailwind.config.css file, do so with the following command:

   npm tailwind init
   

2. Open your tailwind.config.css file.
3. In the theme/colors section add an item with your custom name. This could look like this:

   'primary': '#0f5b81'
   

   Or

   'primary': {
     default: '#0f5b81',
     lighter: '#367797',
     darker: '#02527a'
   }
   

A complete tailwind.config.js file could look like this:

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
    colors: {
      'primary': {
        default: '#0f5b81',
        lighter: '#367797',
        darker: '#02527a'
      }
    }
  },
  variants: {},
  plugins: [],
}