Tailwind CSS, certain custom colors are not working

Question

I'm trying to use Tailwind custom colors in my project by writing some themes in tailwind.config.js extend.

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {
      colors: {
        s2condPurple: '#a32eff',     // works ⭕️
        s2condPink: '#ff0099',       // works ⭕️
        s2condOrange: '#ff5f55',     // works ⭕️
        s2condYellow: '#ffe600',     // doesn't work ❌
        s2condLime: '#cdff64',       // works ⭕️
        s2condMint: '#2af1b5',       // works at 'text-s2condMint' but not at 'border-s2condMint'
        secondTest: '#ffe600',       // works ⭕️ <-- I tested it for s2condYellow but it works perfectly!
        s2condTest2: '#2af1b5',      // doesn't work ❌
        ...
      },
      
    },
  },
  plugins: [],
}

I'm using these colors in my code like this:

const colorList: colorListType = {
  life: 'white',
  identity: 's2condPurple',
  arts: 's2condPink',
  industry: 's2condOrange',
  knowledge: 'secondTest',
  sports: 's2condLime',
  languages: 'secondTest',
}

const { [data.name.en.toLowerCase()]: color } = colorList
...
<button
      className={`border focus:outline-none hover:border-${color} active:border-${color} ${
        clicked ? `border-${color}` : 'border-textBlack'
      } `}
    >
      <p className="text-white">{value.kr}</p>
</button>

Can I get a clue about this issue??

Answer 1

Newer versions of Tailwind only seem to add classes that have been used in your code. When using dynamic classes (like the ones in your example) you will have to declare them within the safelist property.

Here's an example of one way your could do this:

module.exports = {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    theme: {
        extend: {
            colors: {
                s2condPurple: '#a32eff', // works ⭕️
                s2condPink: '#ff0099', // works ⭕️
                s2condOrange: '#ff5f55', // works ⭕️
                s2condYellow: '#ffe600', // should work⭕️
                s2condLime: '#cdff64', // works ⭕️
                s2condMint: '#2af1b5', // works at 'text-s2condMint' but not at 'border-s2condMint'
                secondTest: '#ffe600', // works ⭕️ <-- I tested it for s2condYellow but it works perfectly!
                s2condTest2: '#2af1b5', // should work ⭕️
            },
        },
    },
    plugins: [],
    safelist: [{
            pattern: /(bg|text|border)-s2cond(Purple|Pink|Orange|Yellow|Lime|Mint|Test|Test2)/
        }

    ]
}

You can read more about this in the documentation https://tailwindcss.com/docs/content-configuration#safelisting-classes.

Update: 8th June 2022

If you work with a lot of dynamic margins or dimensions, you might want to add the following to your safelist property.

{
  pattern: /(mt|mb|mr|ml|my|mx|px|py|pt|pb|pl|pr)-[0-9]+/
},
{
  pattern: /flex-.*/
},
{
  pattern: /(bottom|right|top|left)-[0-9]+/
},
{
  pattern: /(w|h)-[0-9]+/
}

Hope this saves someone else's time.

Answer 2

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Here's the answer.

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>.   // ❌
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>.  // ⭕️

I did it in a wrong way :(