Editors — Teasim

The TeaCSS VS Code extension reads the project’s CSS entry so completions, hover output, color previews, diagnostics, and token coloring follow its configured presets. It bundles the language server and engine; the application does not need editor-only dependencies. See the Editors Storybook guide for the extension setup and settings.

Make the entry discoverable

Keep the entry at index.css or src/index.css, or set package.json#teacss.entry when it lives elsewhere:

json

{
  "teacss": {
    "entry": "./src/styles/tea.css"
  }
}

At project-root index.css, declare presets, a source glob, and the output directive:

css

@presets "standard";
@source "./src/**/*.{astro,html,js,jsx,ts,tsx}";
@teacss;

For src/index.css, use @source "./**/*.{astro,html,js,jsx,ts,tsx}";. Globs resolve relative to the entry, not the repository root.

Tune only what your workspace needs

json

{
  "teacss.syntaxHighlight": true,
  "teacss.colorPreview": false,
  "teacss.autocomplete.matchType": "prefix",
  "teacss.unmatchedDiagnostics": true
}

Setting	What it changes
`teacss.syntaxHighlight`	Colors property, value, condition, and other token segments.
`teacss.colorPreview`	Adds swatches to matching color utilities.
`teacss.autocomplete.matchType`	Chooses `prefix` or `fuzzy` matching.
`teacss.remToPxPreview`	Shows pixel equivalents for rem-based output in hover/completion.
`teacss.unmatchedDiagnostics`	Warns about unmatched tokens in recognized class attributes.
`teacss.root`	Selects one or more TeaCSS project roots in a monorepo.

If completions are empty, verify that the entry exists and the source glob includes the file you are editing. In a monorepo, set teacss.root to the folder that owns that entry. Then run the TeaCSS Reload command after moving the entry or changing presets. TeaCSS uses p:4, not p-4.

Editor diagnostics help during authoring, but the build output remains the final check.