Add utility support for CSS if() conditional function

[mdtaufiquekhan]

Hey folks,

I’ve been experimenting with the new CSS if() function
, which basically gives us native conditional logic in CSS (like if/else in JS, but directly inside property values).

For example:

background: if(
  style(--theme: dark): black;
  style(--theme: light): white;
  else: gray;
);

This works in some modern browsers already.

Right now in Tailwind, I can hack this with arbitrary values:

<div class="bg-[if(style(--theme:dark):black;else:white)]">
  ...
</div>

But this feels clunky, especially if I want to reuse it across multiple utilities (like borders, text colors, gradients, etc).

Why I’m bringing this up

• I’m considering using if() for theming (dark/light or even custom modes).
• It would save me from writing duplicate utilities or wrapping things in @supports.
• Arbitrary values work, but they’re not very ergonomic or discoverable.

I know browser support is limited right now, so maybe this is too early — but Tailwind has done a great job of adopting newer CSS features (like container queries) once they start becoming useful.

Do you think Tailwind should eventually add first-class utility support for if(), or should we just stick with arbitrary values for now until support matures?

I’d love to hear how others see this fitting into Tailwind’s utility-first approach.

[rozsazoltan]

I think I can easily solve this for you using variables, where you set the value to "empty" or "initial". It's a hacky solution, but I love it.

Here's a answer I published showing how light-dark() works, which is based on an if-statement: if prefers-color-scheme is light, the first value is returned; if dark, the second value is returned.

Since this raises the minimum browser version requirement for a project using TailwindCSS, I wrote an alternative that might interest you, because it achieves the same result relying solely on variables.

• light-dark() CSS function and alternative

Here's another response where I expanded this alternative from an if-else to an if-elseif-else structure.

• var(--tw-light, ...) var(--tw-dark, ...) var(--tw-coffee, ...)

And now, your example would work something like this:

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant coffee (&:where(.coffee, .coffee *));

.example {
  background-color:
    var(--tw-light, #eb6bd8)
    var(--tw-dark, #8e0d7a)
    var(--tw-coffee, #a67ca8);
}

* {
  color-scheme: light;
  --tw-light: initial;
  --tw-dark: ;
  --tw-coffee: ;
  
  @variant dark {
    color-scheme: dark;
    --tw-light: ;
    --tw-dark: initial;
    --tw-coffee: ;
  }
  
  @variant coffee {
    /* You can keep the value on "light" or "dark" as needed. */
    /* color-scheme: coffee; is invalid. */
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#syntax */
    color-scheme: light;
    --tw-light: ;
    --tw-dark: ;
    --tw-coffee: initial;
  }
}

The beauty of this solution is that it doesn't raise the minimum browser version at all - it's been working reliably for a long time. And unlike if(), this isn't Limited - it works in Firefox and Safari as well.