---
title: "mismatched-framework-import"
description: "Reports an import of style() from the entrypoint of another framework."
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.

# mismatched-framework-import

This rule reports a file that imports `style()` from the entrypoint of another
framework, such as `stillwind/astro` in a React component. Each entrypoint
selects a class key and style representation. Entrypoints with the same output
format are compatible.

## Reported

```tsx
import { style } from "stillwind/astro";

export const props = style("p-4");
```

> mismatched-framework-import: `stillwind/astro` is incompatible with JSX/TSX input; use `stillwind/alpine`, `stillwind/lit`, `stillwind/preact`, `stillwind/qwik`, `stillwind/react`, `stillwind/solid`, `stillwind/vanilla`, `stillwind/vue`
> 
> Example:1:23

## Fixed

```tsx
import { style } from "stillwind/react";

export const props = style("p-4");
```

## How to fix

Import from the entrypoint of the framework that renders the element. A React
island inside an Astro page imports `stillwind/react`. See
[Framework integrations](/docs/integrations#import-style-for-your-framework).

## Rule settings

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

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

Source: https://stillwind.dev/docs/lints/mismatched-framework-import/index.mdx