Tasty logoTasty
Playground

Getting Started

This guide walks you from zero to a working Tasty component, then through the optional shared configuration and tooling layers. It is the right starting point when you already want to try Tasty in code. If you are still deciding whether Tasty fits your team, start with Comparison and Adoption Guide first. For a feature overview, see the README. For the full style language reference, see the Style DSL. For the React API, see the Runtime API. For the rest of the docs by role or task, see the Docs Hub.

Prerequisites

Tasty can be used immediately in a React app, but it is most compelling for teams building reusable components with intersecting states, variants, tokens, and design-system conventions.

Install

pnpm add @tenphi/tasty

Your first component

import { tasty } from '@tenphi/tasty';

const Card = tasty({
  as: 'div',
  styles: {
    display: 'flex',
    flow: 'column',
    padding: '4x',
    gap: '2x',
    fill: '#white',
    border: true,
    radius: true,
  },
});

export default function App() {
  return <Card>Hello, Tasty!</Card>;
}

tasty() returns a normal React component. Values like 4x, #white, true, and 1r are Tasty DSL — they map to CSS custom properties, shorthand expansions, and design tokens. See Style Properties for the full reference.

Optional: add shared configuration

Use configure() once, before your app renders, when your app or design system needs shared state aliases, tokens, recipes, or parser extensions:

// src/tasty-config.ts
import { configure } from '@tenphi/tasty';

configure({
  states: {
    '@mobile': '@media(w < 768px)',
    '@dark': '@root(schema=dark)',
  },
});

These examples use data-schema="dark" as the root-state convention. If your app already uses a different attribute such as data-theme="dark", keep the pattern and swap the attribute name consistently across your config and components.

Import this file at the top of your app entry point so it runs before any component renders:

// src/main.tsx
import './tasty-config';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(<App />);

Define shared tokens and override default unit values

Color tokens like #primary resolve to CSS custom properties at runtime (e.g. var(--primary-color)). Built-in units like x, r, and bw already work without setup and multiply CSS custom properties by default. Use configure({ tokens }) when you want to define shared token values or override the defaults your app uses:

// src/tasty-config.ts
import { configure } from '@tenphi/tasty';

configure({
  tokens: {
    '#primary': 'oklch(55% 0.25 265)',
    '#surface': '#fff',
    '#text': '#111',
    '$gap': '8px',
    '$radius': '4px',
    '$border-width': '1px',
    '$outline-width': '2px',
  },
});

Tokens support state maps for responsive or theme-aware values:

configure({
  tokens: {
    '#primary': {
      '': 'oklch(55% 0.25 265)',
      '@dark': 'oklch(75% 0.2 265)',
    },
  },
});

Every component using #primary, 2x, or 1r adjusts automatically. Tokens are injected as :root CSS custom properties when the first style is rendered. You can also use standard CSS color values such as rgb(...), hsl(...), and named colors directly; okhsl(...) is the recommended choice when you want authored colors that stay aligned with Tasty's design-system-oriented workflow.

Note: configure({ replaceTokens }) is a separate mechanism — it replaces tokens with literal values at parse time (baked into CSS). Use it for value aliases like $card-padding: '4x' that should be resolved during style generation, not for defining color or unit values. See Configuration — Replace Tokens for details.

See Configuration for the full configure() API — tokens, replace tokens, recipes, custom units, style handlers, and TypeScript extensions.

ESLint plugin

The ESLint plugin catches invalid style properties, bad token references, malformed state keys, and other mistakes at lint time — before they reach the browser.

Install

pnpm add -D @tenphi/eslint-plugin-tasty

Configure

Add the plugin to your flat config:

// eslint.config.js
import tasty from '@tenphi/eslint-plugin-tasty';

export default [
  // ...your other configs
  tasty.configs.recommended,
];

The recommended config enables 18 of the plugin's 27 total rules. It covers the most common issues without turning on the stricter governance rules:

CategoryRulesExamples
Property validationknown-property, valid-boolean-property, valid-sub-elementFlags typos like pading or invalid boolean usage
Value validationvalid-value, valid-color-token, valid-custom-unitCatches #nonexistent tokens, bad unit syntax
State validationvalid-state-key, no-nested-state-map, require-default-stateValidates state key syntax, ensures '' default exists
Structurevalid-styles-structure, no-important, no-nested-selectorPrevents !important, invalid nesting
Static modestatic-no-dynamic-values, static-valid-selectorEnforces build-time constraints in tastyStatic()
Style propertiesvalid-preset, valid-recipe, valid-transition, valid-directional-modifier, valid-radius-shapeValidates preset names, recipe references, transition syntax

Strict config

For stricter governance, use tasty.configs.strict. It adds rules that enforce best practices like preferring shorthand properties, consistent token usage, and flagging direct styles prop usage:

export default [
  tasty.configs.strict,
];

Editor support

VS Code Extension — Syntax highlighting for Tasty styles in TypeScript/TSX/JavaScript/JSX. Highlights color tokens, custom units, state keys, presets, and style properties inside tasty() and tastyStatic() calls. Install from the VS Code marketplace or from a .vsix file.

Glaze — OKHSL-based color theme generator with automatic WCAG contrast solving. Generate light, dark, and high-contrast color palettes from a single hue and export them directly as Tasty color tokens. See the Ecosystem section in the README.

Choosing a rendering mode

Tasty has two styling approaches. Pick the one that fits your use case, then decide whether your runtime setup also needs server rendering support:

ApproachEntry pointBest forTrade-off
Runtimetasty() from @tenphi/tastyInteractive apps with reusable stateful components, design systemsCSS generated at runtime; full feature set (styleProps, sub-elements, variants)
Zero-runtimetastyStatic() from @tenphi/tasty/staticStatic sites, landing pages, SSGZero JS overhead; requires Babel plugin; no dynamic props

Both share the same DSL, tokens, units, and state mappings.

Next steps

Common issues