---
title: "invalid-css-input"
description: "Reports a style.css() argument that is not a utility known at build time."
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.

# invalid-css-input

This rule reports an argument of `style.css()` that the compiler cannot turn into
CSS at build time, such as a number, a runtime condition, a ref, or a stored
`style()` result. The argument adds nothing to the string.

## Reported

```tsx
const widthInPixels = 42;
style.css(widthInPixels, { selector: ":host" });
```

> invalid-css-input: style.css() accepts only static utility strings, arrays, and variant groups: the input is not static
> 
> Example:2:11

## Fixed

```tsx
style.css("w-[42px]", { selector: ":host" });
```

## How to fix

- Write the style as utilities that are known at build time.
- For a value that changes at runtime, set a custom property on the element with
  JavaScript, and read it in a utility such as `w-(--width)`.

[style.css()](/docs/macros/css#inputs) lists the accepted inputs.

## 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/invalid-css-input/index.mdx