Question

66

Tailwind Custom Colors Not Complied

rated 0 times [ 69] [ 3] / answers: 1 / hits: 8219 / 3 Years ago, tue, february 23, 2021, 12:00:00

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

};

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kieraelsies

Add To Favorites

Follow

Total Points: 718

Total Questions: 103

Total Answers: 104

Location: England

Member since Sun, May 21, 2023

1 Year ago

kieraelsies questions

1 How do I change text color in SweetAlert2?

Tue, Aug 3, 21, 00:00, 3 Years ago

1 How to write inline onclick function as es6 arrow function?

Thu, Nov 12, 20, 00:00, 4 Years ago

1 How to remove all roles from an user discord.js v12?

Wed, Sep 9, 20, 00:00, 4 Years ago

1 PlusMinus Challenge

Mon, Sep 16, 19, 00:00, 5 Years ago

1 Where is the monaco-editor autocompletion located?

Fri, Sep 13, 19, 00:00, 5 Years ago

View All

answered 3 Years ago jaliyahcynthiac · Accepted Answer

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

};