Override default color

[stedekay]

Hi,
we want to build some standard components like the following:

.tile {
    @apply p-1 bg-blue-100 my-px;
}

.tile:hover {
    @apply bg-blue-200;
}

Sometimes we want to override the color, so for example:

<div class="tile bg-red-100 hover:bg-red-200">
 ...
</div>

But in this case the hover is still blue.

As we want to be flexible with the colors we don't want to add classes like .tile-red, .tile-green etc. like in the example of the buttons but we stillt want to leave the default as blue. Are there some alternatives how to accomplish this?

[Apostolique]

I believe you can put your tile definition above the utilities. That way the utilities will take precedence.

@tailwind base;

@tailwind components;

.tile {
    @apply p-1 bg-blue-100 my-px;
}

.tile:hover {
    @apply bg-blue-200;
}

@tailwind utilities;

[stedekay]

This is already the case.

[stedekay]

Okay, seems to be a config issue as my color red-200 isn't available. So thanks for your input, definitely learned something from your answer.

[stedekay]

This was a misconfiguration issue.

[Apostolique]

What was the issue? It was getting purged?

[stedekay]

We were overriding the color palettes and it looked like this:

red: {
    100: '#FCBCB4',
    300: '#ff0000',
},

🤦