Tailwind Custom Colors Not Complied

user_11019230 0
Viewed 6552

On npm start (craco start) everything works fine and colors are being compiled.

When running npm run build (craco build) though, only one color of each configuration is being compiled, dallas from theme.textColor and vista-white from theme.gradientColorStops.

I tried:

  • Reordering theme.textColor properties.
  • Deleting node_modules and npm i.
  • Deleting the build and rebuilding.
// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
};

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    textColor: (theme) => ({
      ...theme('colors'),
      dallas: '#664A2D',
      'blue-charcoal': '#24292E',
      denim: '#0D66C2',
      'spring-green': '#05E776',
      flamingo: '#E65A4D',
    }),
    gradientColorStops: (theme) => ({
      ...theme('colors'),
      'vista-white': '#E1DFDC',
    }),
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
craco tailwind-css reactjs javascript
3 Answers

Thanks to @George for pointing out the problem:

Purge will not recognise your usage of this class. See https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html. Specifically, "Don't use string concatenation to create class names". Purge is not 'smart' in any way, it works by matching your utilities against classes (or any string, really..) throughout your templates.

One possible solution is to add the classes that are being purged to purge.safelist:

// tailwind.config.js
module.exports = {
  // Added safelist
  purge: {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    options: {
      safelist: ['hover:text-blue-charcoal', 'hover:text-denim', 'hover:text-spring-green', 'hover:text-flamingo'],
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    textColor: (theme) => ({
      ...theme('colors'),
      dallas: '#664A2D',
      'blue-charcoal': '#24292E',
      denim: '#0D66C2',
      'spring-green': '#05E776',
      flamingo: '#E65A4D',
    }),
    gradientColorStops: (theme) => ({
      ...theme('colors'),
      'vista-white': '#E1DFDC',
    }),
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
user_110192300

If u use Tailwind 3 you can :

module.exports = {
 theme: {
extend: {
  colors: {
    'regal-blue': '#243c5a',
    },
   }
  }
 }

Just add "extend" if no use, All colors will be reset This allows you not to have to use the safelist

user_78512710

To customize text colors in the Tailwind you need to configure tailwind.config.js like this

module.exports = {
  theme: {
    textColor: {
      'primary': '#3490dc',
      'secondary': '#ffed4a',
      'danger': '#e3342f',
    }
  }
}

You can refer to Tailwind docs for more information.

user_89511750
Related