CODEWITHSUNDEEP
javascriptreactjstailwind-csscraco
zouabi
zouabi

Reputation: 857

Tailwind Custom Colors Not Complied

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:

// 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: [],
};

Upvotes: 4

Views: 11362

Answers (3)

zouabi
zouabi

Reputation: 857

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.options.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: [],
};

Upvotes: 10

Pixel online
Pixel online

Reputation: 73

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

Upvotes: 2

Qayyum Shareef
Qayyum Shareef

Reputation: 44

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.

Upvotes: -1

Related Questions