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??

Tailwind will only add CSS for the complete styles that it can find in your code, therefore your dynamically created styles (e.g. `border-${color}`) will not work unless the complete utility class (e.g. `border-s2condYellow`) is used elsewhere. See https://stackoverflow.com/questions/71063619/react-and-tailwind-css-dynamically-generated-classes-are-not-being-applied/71068925#71068925 — Ed Lucas, Mar 28 '22 at 16:37

Prince Owen · Answer 1 · 2022-06-08T18:33:19.680

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.

score 9 · Answer 2 · answered Mar 28 '22 at 23:23

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

Tailwind CSS, certain custom colors are not working

2 Answers2

Linked