Editor setup

Strata ships first-party tooling for VS Code, Zed and JetBrains IDEs: autocomplete for every utility and token, hover previews of generated CSS and type errors for misspelled class names.

Updated Sep 18, 2026 3 min readTooling

Strata IntelliSense

Install the Strata IntelliSense extension. It reads strata.config.ts, so suggestions always reflect your own tokens — including custom colours, spacing steps and breakpoints.

Autocomplete for 1,480 utilities and every token in your theme
Hover any class to preview the CSS it generates
Colour swatches inline next to bg-*, text-* and border-*
Lint warnings for conflicting utilities such as p-4 p-6

Recommended settings

.vscode/settings.json

{
  "strata.classAttributes": ["class", "className", "tw"],
  "strata.experimental.typedClasses": true,
  "editor.quickSuggestions": { "strings": "on" },
  "files.associations": { "*.css": "strata-css" }
}

Typed class names

With typedClasses enabled, the compiler emits a strata-env.d.ts file and the cx() helper rejects unknown classes at type-check time.

src/components/badge.tsx

import { cx } from "@strata/core";

export function Badge({ tone = "brand" }: { tone?: "brand" | "muted" }) {
  // Type error: "bg-brnd" is not a Strata class
  return <span className={cx("pill px-2", tone === "brand" && "bg-brand")} />;
}

Class sorting with Prettier

Our Prettier plugin sorts classes in the same order the compiler emits them: layout, box, typography, colour, state.

npm

pnpm

bun

yarn

$ npm install -D prettier-plugin-strata

Was this page helpful?

Last edited Sep 18, 2026 · docs/editor-setup.mdx