Add bg-current-xxx and text-current-xxx

[jacobdalamb]

It would be a helpful feature to all multiple elements to change their current background or text color on hover or focus even if they're all different colors.

[JNavith]

I don't think this is possible, because Tailwind can't make features that CSS doesn't support.

I would imagine that bg-blue-200 sets

/* already does this (simplified) */
background-color: #whatever200;
/* new stuff */
--bg-current: blue;
--blue-100: #whatever100;
--blue-200: #whatever200;
/* ... */
--blue-900: #whatever900;

and hover:bg-current-900 sets

background-color: var(--var(--bg-current)-900);

which is not valid syntax.

Do you expect another way for this to work?

[JNavith]

Actually, it's occurred to me that it could be possible if you reduce that all to:

.bg-blue-200 {
  /* already does this (simplified) */
  background-color: #whatever200;
  /* new stuff */
  --bg-current-100: #whatever100;
  --bg-current-200: #whatever200;
  /* ... */
  --bg-current-900: #whatever900;
}

.hover\:bg-current-900 {
  background-color: var(--bg-current-900);
}

[hacknug]

This is possible and already shared it with Adam a while ago on Twitter when (guessing) they started working on the alpha colors update (haven't been able to keep up with GitHub notifications for the past few months lol).

I think you'll have to rewrite all the color dependent plugins if you wanna take full advantage though, so it's definitely not the solution you were expecting. Sorry about that haha

Please share your take on it if you ever implement it 🙏

https://codepen.io/hack_nug/pen/VwLPBzw