---
title: "no-class-property"
description: "Reports the class field, which adds classes without generated CSS."
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.

# no-class-property

This rule reports a `class` field in `style()`. A `class` field adds classes that
another stylesheet defines, so Stillwind does not check them. Enable this rule
when every style in the project must come from utilities. No preset enables it.

## Reported

```css
.card {
  border-radius: 8px;
  padding: 16px;
}
```

```tsx
style({ class: "card" });
```

> no-class-property: `class` contributions are forbidden in style objects; use utilities, custom properties, or CSS variants
> 
> Example:1:16

## Fixed

```css
@utility card {
  border-radius: 8px;
  padding: 16px;
}
```

```tsx
style("card");
```

## How to fix

- Move the class's declarations into a utility, as in the example. Keep the same
  declarations so the component's appearance does not change.
- If a third-party library needs its own class, keep the `class` field and add a
  [suppression comment](/docs/configuration#suppression-comments) with the
  reason.

## Rule settings

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

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

Source: https://stillwind.dev/docs/lints/no-class-property/index.mdx