CODEWITHSUNDEEP
reactjstailwind-css
김일혁
김일혁

Reputation: 429

Tailwind CSS, certain custom colors are not working

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

Upvotes: 24

Views: 35327

Answers (3)

clxrity
clxrity

Reputation: 336

You seemingly can't use (certain???) hex/rgb phrases as colors with tailwind, I've had this issue too.

The best work-around for me was utilizing the style property to set colors (especially if doing it dynamically).

<div style={{ backgroundColor: color || COLORS.primary }} />

Upvotes: 0

Prince Owen
Prince Owen

Reputation: 1515

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.

Upvotes: 43

김일혁
김일혁

Reputation: 429

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

Upvotes: 11

Related Questions