Docs Hub

Tasty is CSS-in-JS for React design systems. You describe hover, disabled, variants, themes, responsive behavior, and other conditions as state maps; Tasty compiles them so one branch wins without specificity fights or source-order surprises.

Use this hub to move from the core idea to a working component, then into design-system patterns or API reference as needed.

Start Here

• Understand why: Introduction for the problem, the state-map model, and the product overview.
• Try it: Getting Started to build a stateful component, add shared configuration, and choose a rendering mode.
• Build a component system: Methodology for root + sub-elements, typed public APIs, tokens, and extension patterns; then Building a Design System.
• Evaluate or adopt it: Comparison for tool-selection context and Adoption Guide for an incremental rollout.
• Understand the compiler: Style rendering pipeline for how state maps become mutually exclusive selectors.

By Role

• Application developer using an existing design system: Getting Started, then React API.
• Design-system author: Methodology, Building a Design System, Configuration, and Adoption Guide.
• Platform or tooling engineer: Configuration, Build-Time Extraction (tastyStatic), Server-Side Rendering, and Debug Utilities.

By Styling Approach

• React components: React API
• Zero-client-runtime React with tasty(): Server-Side Rendering, especially the static Astro integration
• Build-time extraction with tastyStatic(): Build-Time Extraction
• Hydrated tasty() with server collection: Server-Side Rendering
• Upgrading from v2: Migration Guide (v2 → v3)

By Task

• Learn the style language: Style DSL
• Brief an AI agent (or yourself) on writing correct styles: Style Rules for AI Agents
• Look up a property handler: Style Properties
• Define tokens, units, recipes, keyframes, properties, functions, or polyfills globally: Configuration
• Extend Tasty with a plugin, custom handler, or custom prop: Plugins & Extension Points
• Debug generated CSS or cache behavior: Debug Utilities
• Understand how selector generation works internally: Style rendering pipeline
• Understand runtime injection internals: Style Injector
• Reproduce and interpret performance measurements: Runtime Benchmarks