---
title: "SW11001: Style composition cycle"
description: "Two styles use each other as a base."
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.

# SW11001: Style composition cycle

This error occurs when styles use each other as a base, directly or through other
styles. The CSS of a base comes before the CSS of the styles built on it, so a
cycle has no valid order.

## Reported

```tsx
const first = style(second, "rounded-md");
const second = style(first, "p-4");
```

> SW11001: style composition dependency cycle

## Fixed

```tsx
const base = style("rounded-md p-4");
const first = style(base);
const second = style(base);
```

## How to fix

- If both styles need the same utilities, move those utilities into a third
  base, as in the example.
- If only one style extends the other, keep that dependency and remove the one
  in the opposite direction.

A cycle between whole modules is reported as [SW11002](/docs/errors/SW11002)
instead.

Source: https://stillwind.dev/docs/errors/SW11001/index.mdx