---
title: "runtime-condition-requires-css-if"
description: "Reports a runtime CSS condition that needs the useCssIf setting."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# runtime-condition-requires-css-if

This rule reports a runtime CSS condition, such as `if(--state:active):`, that
the compiler can only express with the native CSS `if()` function. The project
does not enable it, so the utility produces no CSS.

## Reported

```tsx
style("if(--state:active):block");
```

> runtime-condition-requires-css-if: `if(--state:active):block` cannot be lowered: custom-property value comparisons require useCssIf: true
> 
> Example:1:8

## Fixed

```ts title="stillwind.config.ts"
import { defineConfig } from "stillwind/config";

export default defineConfig({
  projects: [
    {
      css: "./src/stillwind.css",
      files: ["src/**/*.{ts,tsx}"],
      useCssIf: true,
    },
  ],
});
```

```tsx
style("if(--state:active):block");
```

## How to fix

- If the browsers that you support implement CSS `if()`, set `useCssIf: true` in
  the project, as in the example. Keep the condition on the custom property.
- Otherwise, represent the state with an attribute and use an attribute variant.
  That requires changing the code that sets the state as well.

See [Configuration](/docs/configuration#generated-css).

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | deny |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/runtime-condition-requires-css-if/index.mdx