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

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 :(

Answer 2

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.