# Salty CSS

> Build-time CSS-in-TS for React, Next.js and Astro. Compiles `styled(...)` calls
> in `*.css.ts` files to plain CSS at build time — zero runtime cost, with full
> TypeScript autocomplete on design tokens, themes, variants and media queries.
> Works with React Server Components.

Salty CSS is currently in (`@salty-css/* 0.4.0`); expect
minor breaking changes between releases. It is not a fork of vanilla-extract,
stitches or Linaria — it has its own compiler and API.

The documentation set is mirrored across the React, Next.js and Astro sections
below. The three are translations of the same content with framework-specific
install steps and code snippets — pick the section that matches your stack.

Full documentation: https://salty-css.dev/llms-full.txt (all frameworks)
Per-framework: https://salty-css.dev/llms-full-react.txt | https://salty-css.dev/llms-full-next.txt | https://salty-css.dev/llms-full-astro.txt

## Overview
- [Salty CSS](https://salty-css.dev/): Build time CSS-in-JS library compatible with React, Next.js, Vite and React Server Components built with TypeScript.
- [Salty CSS for React](https://salty-css.dev/react/): Sprinkle Salty CSS on your React app — build-time CSS-in-TS that ships zero runtime.
- [Salty CSS for Next.js](https://salty-css.dev/next/): Salty CSS served fresh from the App Router — zero-runtime styles that work with React Server Components.
- [Salty CSS for Astro](https://salty-css.dev/astro/): Astro plus a pinch of salt — the same styled API in .astro files and React islands, extracted to plain CSS at build time.

## Documentation (React)
- [Documentation](https://salty-css.dev/docs/react/): Salty CSS is a TypeScript-first, build-time CSS-in-TS library for React, Next.js, and Astro — typed styles, design tokens, theming, and zero runtime.
- [Getting Started](https://salty-css.dev/docs/react/getting-started/): Install Salty CSS, ship your first typed component, and learn the everyday workflow — quick start, installation, usage, the CLI, ESLint, and FAQ.
- [Quick Start](https://salty-css.dev/docs/react/quick-start/): Set up Salty CSS in ~15 minutes — install with the CLI, write your first typed component, add variants, ship dark mode, and register a custom font.
- [Installation](https://salty-css.dev/docs/react/installation/): Install Salty CSS and wire up the build-time plugin for your framework.
- [Usage](https://salty-css.dev/docs/react/usage/): Build and consume Salty CSS components inside your application code.
- [Troubleshooting](https://salty-css.dev/docs/react/troubleshooting/): Diagnose common Salty CSS issues — missing styles, build errors, framework-detection mistakes, and SSR caveats.
- [Frequently Asked Questions](https://salty-css.dev/docs/react/faq/): Short answers about Salty CSS — what it is, how the build works, theming without a provider, React Server Components, fonts, TypeScript, and incremental adoption.
- [CLI](https://salty-css.dev/docs/react/cli/): Use the salty-css command-line interface to scaffold, generate, and build your project.
- [Styling](https://salty-css.dev/docs/react/styling/): Author component styles, design tokens, themes, fonts, variants, media queries, animations, and templates with Salty CSS.
- [Styling Basics](https://salty-css.dev/docs/react/basics/): Understand styled components, className, tokens, and global styles in Salty CSS.
- [Variables](https://salty-css.dev/docs/react/variables/): Define design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- [Theming](https://salty-css.dev/docs/react/theming/): Add dark mode and multi-theme support to your app with conditional CSS variables — no React provider, no context, no flash on hydration. Just flip an attribute.
- [Fonts](https://salty-css.dev/docs/react/fonts/): Register web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- [Variants](https://salty-css.dev/docs/react/variants/): Compose variant, compound, and default styles to build adaptable components in Salty CSS.
- [Classnames](https://salty-css.dev/docs/react/classnames/): Generate reusable Salty CSS class strings with the className function for any element.
- [Overrides](https://salty-css.dev/docs/react/overrides/): Extend styled components, swap elements, and override styles with props in Salty CSS.
- [Animations](https://salty-css.dev/docs/react/animations/): Define typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- [Templates](https://salty-css.dev/docs/react/templates/): Build reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.
- [Media Queries](https://salty-css.dev/docs/react/media-queries/): Use defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- [Utilities](https://salty-css.dev/docs/react/utilities/): Helpers that complement Salty CSS styles — fluid viewport sizing, color transforms, and shorthand modifiers.
- [Viewport Clamp](https://salty-css.dev/docs/react/viewport-clamp/): Generate fluid responsive sizes with defineViewportClamp in Salty CSS — no media-query stair-steps.
- [API](https://salty-css.dev/docs/react/api/): Full reference for the Salty CSS public API — styled, className, defineConfig, the define* factories, and the runtime helper.
- [Styled Function API](https://salty-css.dev/docs/react/api/styled/): API reference for styled() in Salty CSS — typed components with base styles, variants, anyOfVariants, defaultVariants, passProps, element override, and priority.
- [Classname Function API](https://salty-css.dev/docs/react/api/classname/): Full API reference for the className() function in Salty CSS — signature, options, and variants.
- [defineConfig API](https://salty-css.dev/docs/react/api/config/): Full reference for defineConfig — variables, global, reset, templates, modifiers, importStrategy, externalModules, strict, and defaultUnit.

## Documentation (Next.js)
- [Documentation](https://salty-css.dev/docs/next/): Salty CSS is a TypeScript-first, build-time CSS-in-TS library for React, Next.js, and Astro — typed styles, design tokens, theming, and zero runtime.
- [Getting Started](https://salty-css.dev/docs/next/getting-started/): Install Salty CSS, ship your first typed component, and learn the everyday workflow — quick start, installation, usage, the CLI, ESLint, and FAQ.
- [Quick Start](https://salty-css.dev/docs/next/quick-start/): Set up Salty CSS in ~15 minutes — install with the CLI, write your first typed component, add variants, ship dark mode, and register a custom font.
- [Installation](https://salty-css.dev/docs/next/installation/): Install Salty CSS and wire up the build-time plugin for your framework.
- [Usage](https://salty-css.dev/docs/next/usage/): Build and consume Salty CSS components inside your application code.
- [Troubleshooting](https://salty-css.dev/docs/next/troubleshooting/): Diagnose common Salty CSS issues — missing styles, build errors, framework-detection mistakes, and SSR caveats.
- [Frequently Asked Questions](https://salty-css.dev/docs/next/faq/): Short answers about Salty CSS — what it is, how the build works, theming without a provider, React Server Components, fonts, TypeScript, and incremental adoption.
- [CLI](https://salty-css.dev/docs/next/cli/): Use the salty-css command-line interface to scaffold, generate, and build your project.
- [Styling](https://salty-css.dev/docs/next/styling/): Author component styles, design tokens, themes, fonts, variants, media queries, animations, and templates with Salty CSS.
- [Styling Basics](https://salty-css.dev/docs/next/basics/): Understand styled components, className, tokens, and global styles in Salty CSS.
- [Variables](https://salty-css.dev/docs/next/variables/): Define design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- [Theming](https://salty-css.dev/docs/next/theming/): Add dark mode and multi-theme support to your app with conditional CSS variables — no React provider, no context, no flash on hydration. Just flip an attribute.
- [Fonts](https://salty-css.dev/docs/next/fonts/): Register web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- [Variants](https://salty-css.dev/docs/next/variants/): Compose variant, compound, and default styles to build adaptable components in Salty CSS.
- [Classnames](https://salty-css.dev/docs/next/classnames/): Generate reusable Salty CSS class strings with the className function for any element.
- [Overrides](https://salty-css.dev/docs/next/overrides/): Extend styled components, swap elements, and override styles with props in Salty CSS.
- [Animations](https://salty-css.dev/docs/next/animations/): Define typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- [Templates](https://salty-css.dev/docs/next/templates/): Build reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.
- [Media Queries](https://salty-css.dev/docs/next/media-queries/): Use defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- [Utilities](https://salty-css.dev/docs/next/utilities/): Helpers that complement Salty CSS styles — fluid viewport sizing, color transforms, and shorthand modifiers.
- [Viewport Clamp](https://salty-css.dev/docs/next/viewport-clamp/): Generate fluid responsive sizes with defineViewportClamp in Salty CSS — no media-query stair-steps.
- [API](https://salty-css.dev/docs/next/api/): Full reference for the Salty CSS public API — styled, className, defineConfig, the define* factories, and the runtime helper.
- [Styled Function API](https://salty-css.dev/docs/next/api/styled/): API reference for styled() in Salty CSS — typed components with base styles, variants, anyOfVariants, defaultVariants, passProps, element override, and priority.
- [Classname Function API](https://salty-css.dev/docs/next/api/classname/): Full API reference for the className() function in Salty CSS — signature, options, and variants.
- [defineConfig API](https://salty-css.dev/docs/next/api/config/): Full reference for defineConfig — variables, global, reset, templates, modifiers, importStrategy, externalModules, strict, and defaultUnit.

## Documentation (Astro)
- [Documentation](https://salty-css.dev/docs/astro/): Salty CSS is a TypeScript-first, build-time CSS-in-TS library for React, Next.js, and Astro — typed styles, design tokens, theming, and zero runtime.
- [Getting Started](https://salty-css.dev/docs/astro/getting-started/): Install Salty CSS, ship your first typed component, and learn the everyday workflow — quick start, installation, usage, the CLI, ESLint, and FAQ.
- [Quick Start](https://salty-css.dev/docs/astro/quick-start/): Set up Salty CSS in ~15 minutes — install with the CLI, write your first typed component, add variants, ship dark mode, and register a custom font.
- [Installation](https://salty-css.dev/docs/astro/installation/): Install Salty CSS and wire up the build-time plugin for your framework.
- [Usage](https://salty-css.dev/docs/astro/usage/): Build and consume Salty CSS components inside your application code.
- [Troubleshooting](https://salty-css.dev/docs/astro/troubleshooting/): Diagnose common Salty CSS issues — missing styles, build errors, framework-detection mistakes, and SSR caveats.
- [Frequently Asked Questions](https://salty-css.dev/docs/astro/faq/): Short answers about Salty CSS — what it is, how the build works, theming without a provider, React Server Components, fonts, TypeScript, and incremental adoption.
- [CLI](https://salty-css.dev/docs/astro/cli/): Use the salty-css command-line interface to scaffold, generate, and build your project.
- [Styling](https://salty-css.dev/docs/astro/styling/): Author component styles, design tokens, themes, fonts, variants, media queries, animations, and templates with Salty CSS.
- [Styling Basics](https://salty-css.dev/docs/astro/basics/): Understand styled components, className, tokens, and global styles in Salty CSS.
- [Variables](https://salty-css.dev/docs/astro/variables/): Define design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- [Theming](https://salty-css.dev/docs/astro/theming/): Add dark mode and multi-theme support to your app with conditional CSS variables — no React provider, no context, no flash on hydration. Just flip an attribute.
- [Fonts](https://salty-css.dev/docs/astro/fonts/): Register web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- [Variants](https://salty-css.dev/docs/astro/variants/): Compose variant, compound, and default styles to build adaptable components in Salty CSS.
- [Classnames](https://salty-css.dev/docs/astro/classnames/): Generate reusable Salty CSS class strings with the className function for any element.
- [Overrides](https://salty-css.dev/docs/astro/overrides/): Extend styled components, swap elements, and override styles with props in Salty CSS.
- [Animations](https://salty-css.dev/docs/astro/animations/): Define typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- [Templates](https://salty-css.dev/docs/astro/templates/): Build reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.
- [Media Queries](https://salty-css.dev/docs/astro/media-queries/): Use defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- [Utilities](https://salty-css.dev/docs/astro/utilities/): Helpers that complement Salty CSS styles — fluid viewport sizing, color transforms, and shorthand modifiers.
- [Viewport Clamp](https://salty-css.dev/docs/astro/viewport-clamp/): Generate fluid responsive sizes with defineViewportClamp in Salty CSS — no media-query stair-steps.
- [API](https://salty-css.dev/docs/astro/api/): Full reference for the Salty CSS public API — styled, className, defineConfig, the define* factories, and the runtime helper.
- [Styled Function API](https://salty-css.dev/docs/astro/api/styled/): API reference for styled() in Salty CSS — typed components with base styles, variants, anyOfVariants, defaultVariants, passProps, element override, and priority.
- [Classname Function API](https://salty-css.dev/docs/astro/api/classname/): Full API reference for the className() function in Salty CSS — signature, options, and variants.
- [defineConfig API](https://salty-css.dev/docs/astro/api/config/): Full reference for defineConfig — variables, global, reset, templates, modifiers, importStrategy, externalModules, strict, and defaultUnit.

## Concepts
- [Concepts](https://salty-css.dev/concepts/): Deep dives into how Salty CSS works under the hood — the compiler, the design choices, and the problems each piece solves.
- [Why Salty CSS Exists](https://salty-css.dev/concepts/why-salty-css-exists/): The story behind Salty CSS — what shaped it, where it came from, who it's for, and an honest accounting of where things stand now.
- [Compiler & Zero-Runtime](https://salty-css.dev/concepts/compiler/): Deep dives into how the Salty CSS compiler works, why it executes .css.ts files instead of parsing ASTs, and what "zero-runtime" actually ships to the browser.
- [Scoping & Specificity](https://salty-css.dev/concepts/scoping/): How Salty CSS pairs hash-based isolation with native CSS Cascade Layers to make the specificity war winnable, enable safe component extension, and keep overrides predictable as applications grow.
- [Thinking in styled](https://salty-css.dev/concepts/styled-api/): The way of thinking the styled API rewards — building typed presentational components instead of raw class names, layering their states with variants, and choosing deliberately between variants, extension, and variables when you compose. The mindset, not the API surface.
- [Theming](https://salty-css.dev/concepts/theming/): What theming means in Salty CSS — as a design idea (light/dark and brand color schemes that stay accessible) and as a technical layer that maps static brand colors onto contextual, switchable variables. Plus how Salty resolves themes in native CSS Custom Properties without a provider, and when to reach for conditional vs responsive.
- [Design Philosophy](https://salty-css.dev/concepts/design-philosophy/): Why Salty CSS chose semantic component scoping over atomic CSS, primitives over pre-baked UI kits, and developer time over the smallest possible stylesheet.

## Optional
- [Imports (React)](https://salty-css.dev/docs/react/imports/): Pull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- [Color Function (React)](https://salty-css.dev/docs/react/color-function/): Chain color transforms — lighten, darken, alpha, mix — with the Salty CSS color helper.
- [Modifiers (React)](https://salty-css.dev/docs/react/modifiers/): Define custom value transformers with the modifiers config — pattern + transform function for shorthand syntaxes.
- [define* factories index (React)](https://salty-css.dev/docs/react/api/define-factories/): One-page index of every define* helper in Salty CSS — signature, role, and links to the deep-dive.
- [defineRuntime API (React)](https://salty-css.dev/docs/react/api/runtime/): API reference for defineRuntime() in Salty CSS — turn arbitrary JSON-shaped style objects (CMS payloads, prop-derived overrides) into scoped CSS at request time, while staying inside the same parser as styled().
- [Imports (Next.js)](https://salty-css.dev/docs/next/imports/): Pull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- [Color Function (Next.js)](https://salty-css.dev/docs/next/color-function/): Chain color transforms — lighten, darken, alpha, mix — with the Salty CSS color helper.
- [Modifiers (Next.js)](https://salty-css.dev/docs/next/modifiers/): Define custom value transformers with the modifiers config — pattern + transform function for shorthand syntaxes.
- [define* factories index (Next.js)](https://salty-css.dev/docs/next/api/define-factories/): One-page index of every define* helper in Salty CSS — signature, role, and links to the deep-dive.
- [defineRuntime API (Next.js)](https://salty-css.dev/docs/next/api/runtime/): API reference for defineRuntime() in Salty CSS — turn arbitrary JSON-shaped style objects (CMS payloads, prop-derived overrides) into scoped CSS at request time, while staying inside the same parser as styled().
- [Imports (Astro)](https://salty-css.dev/docs/astro/imports/): Pull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- [Color Function (Astro)](https://salty-css.dev/docs/astro/color-function/): Chain color transforms — lighten, darken, alpha, mix — with the Salty CSS color helper.
- [Modifiers (Astro)](https://salty-css.dev/docs/astro/modifiers/): Define custom value transformers with the modifiers config — pattern + transform function for shorthand syntaxes.
- [define* factories index (Astro)](https://salty-css.dev/docs/astro/api/define-factories/): One-page index of every define* helper in Salty CSS — signature, role, and links to the deep-dive.
- [defineRuntime API (Astro)](https://salty-css.dev/docs/astro/api/runtime/): API reference for defineRuntime() in Salty CSS — turn arbitrary JSON-shaped style objects (CMS payloads, prop-derived overrides) into scoped CSS at request time, while staying inside the same parser as styled().
- [Build a Theme Toggle With No Runtime CSS (Recipe · React)](https://salty-css.dev/recipes/react/theme-toggle/): A dark/light theme that flips on a `data-theme` attribute — every rule for both themes is generated at build time.
- [Decouple a Heading's Tag From Its Looks (Recipe · React)](https://salty-css.dev/recipes/react/polymorphic-heading/): A `Heading` styled component whose default tag is `<h2>`, with an `as` prop that swaps the element per call site — typed, no runtime cost.
- [Status Badges Whose Shared Rules Never Block Local Overrides (Recipe · React)](https://salty-css.dev/recipes/react/zero-specificity-badges/): Use `anyOfVariants` and `:where()` to share styles across several variant branches without raising specificity — call-site overrides always win.
- [Fluid Typography From One Helper, No Media-Query Stair-Steps (Recipe · React)](https://salty-css.dev/recipes/react/fluid-typography/): Build a headline that scales smoothly from mobile to 4K with a single `defineViewportClamp` helper instead of a stack of `@media` rules.
- [Auto-Generated Hover and Active Shades With color() (Recipe · React)](https://salty-css.dev/recipes/react/color-function-shades/): Derive hover, active, and disabled shades from a single brand color — the math runs at build time and ships as static CSS.
- [Stagger a List Animation Without Writing a Class per Item (Recipe · React)](https://salty-css.dev/recipes/react/staggered-list-animation/): One `keyframes` value and a variant prop drive a list that fades in with a cascading delay — no per-item CSS, no JS timing logic.
- [Beat a Third-Party Reset Without Reaching for !important (Recipe · React)](https://salty-css.dev/recipes/react/priority-overrides/): Lift a component into a higher CSS layer with `priority` — selector specificity stays flat, the override wins, no `!important` left behind.
- [A Single-Instance Override via a CSS Variable, Not a New Variant (Recipe · React)](https://salty-css.dev/recipes/react/css-variable-escape-hatch/): Expose tunable knobs as CSS custom properties on a component, then override them per call site with `style={{ "--knob": … }}` — typed, layer-busting, no new variant required.
- [Enforce a Design Scale With a Custom Modifier (Recipe · React)](https://salty-css.dev/recipes/react/custom-modifier-scale/): Add a `defineConfig` modifier that rewrites `padding: "px:16"` into `1rem` — every developer is on the same scale without anyone policing PRs.
- [Build a Theme Toggle With No Runtime CSS (Recipe · Next.js)](https://salty-css.dev/recipes/next/theme-toggle/): A dark/light theme that flips on a `data-theme` attribute — every rule for both themes is generated at build time.
- [Decouple a Heading's Tag From Its Looks (Recipe · Next.js)](https://salty-css.dev/recipes/next/polymorphic-heading/): A `Heading` styled component whose default tag is `<h2>`, with an `as` prop that swaps the element per call site — typed, no runtime cost.
- [Status Badges Whose Shared Rules Never Block Local Overrides (Recipe · Next.js)](https://salty-css.dev/recipes/next/zero-specificity-badges/): Use `anyOfVariants` and `:where()` to share styles across several variant branches without raising specificity — call-site overrides always win.
- [Fluid Typography From One Helper, No Media-Query Stair-Steps (Recipe · Next.js)](https://salty-css.dev/recipes/next/fluid-typography/): Build a headline that scales smoothly from mobile to 4K with a single `defineViewportClamp` helper instead of a stack of `@media` rules.
- [Auto-Generated Hover and Active Shades With color() (Recipe · Next.js)](https://salty-css.dev/recipes/next/color-function-shades/): Derive hover, active, and disabled shades from a single brand color — the math runs at build time and ships as static CSS.
- [Stagger a List Animation Without Writing a Class per Item (Recipe · Next.js)](https://salty-css.dev/recipes/next/staggered-list-animation/): One `keyframes` value and a variant prop drive a list that fades in with a cascading delay — no per-item CSS, no JS timing logic.
- [Beat a Third-Party Reset Without Reaching for !important (Recipe · Next.js)](https://salty-css.dev/recipes/next/priority-overrides/): Lift a component into a higher CSS layer with `priority` — selector specificity stays flat, the override wins, no `!important` left behind.
- [A Single-Instance Override via a CSS Variable, Not a New Variant (Recipe · Next.js)](https://salty-css.dev/recipes/next/css-variable-escape-hatch/): Expose tunable knobs as CSS custom properties on a component, then override them per call site with `style={{ "--knob": … }}` — typed, layer-busting, no new variant required.
- [Enforce a Design Scale With a Custom Modifier (Recipe · Next.js)](https://salty-css.dev/recipes/next/custom-modifier-scale/): Add a `defineConfig` modifier that rewrites `padding: "px:16"` into `1rem` — every developer is on the same scale without anyone policing PRs.
- [A Per-Tenant Brand Color Resolved on the Server (Recipe · Next.js)](https://salty-css.dev/recipes/next/runtime-tenant-theme/): Use `defineRuntime` to take a brand color from a per-request lookup (database, env, CMS) and emit scoped CSS inline next to the element — no client styling runtime.
- [Build a Theme Toggle With No Runtime CSS (Recipe · Astro)](https://salty-css.dev/recipes/astro/theme-toggle/): A dark/light theme that flips on a `data-theme` attribute — every rule for both themes is generated at build time.
- [Decouple a Heading's Tag From Its Looks (Recipe · Astro)](https://salty-css.dev/recipes/astro/polymorphic-heading/): A `Heading` styled component whose default tag is `<h2>`, with an `as` prop that swaps the element per call site — typed, no runtime cost.
- [Status Badges Whose Shared Rules Never Block Local Overrides (Recipe · Astro)](https://salty-css.dev/recipes/astro/zero-specificity-badges/): Use `anyOfVariants` and `:where()` to share styles across several variant branches without raising specificity — call-site overrides always win.
- [Fluid Typography From One Helper, No Media-Query Stair-Steps (Recipe · Astro)](https://salty-css.dev/recipes/astro/fluid-typography/): Build a headline that scales smoothly from mobile to 4K with a single `defineViewportClamp` helper instead of a stack of `@media` rules.
- [Auto-Generated Hover and Active Shades With color() (Recipe · Astro)](https://salty-css.dev/recipes/astro/color-function-shades/): Derive hover, active, and disabled shades from a single brand color — the math runs at build time and ships as static CSS.
- [Stagger a List Animation Without Writing a Class per Item (Recipe · Astro)](https://salty-css.dev/recipes/astro/staggered-list-animation/): One `keyframes` value and a variant prop drive a list that fades in with a cascading delay — no per-item CSS, no JS timing logic.
- [Beat a Third-Party Reset Without Reaching for !important (Recipe · Astro)](https://salty-css.dev/recipes/astro/priority-overrides/): Lift a component into a higher CSS layer with `priority` — selector specificity stays flat, the override wins, no `!important` left behind.
- [A Single-Instance Override via a CSS Variable, Not a New Variant (Recipe · Astro)](https://salty-css.dev/recipes/astro/css-variable-escape-hatch/): Expose tunable knobs as CSS custom properties on a component, then override them per call site with `style={{ "--knob": … }}` — typed, layer-busting, no new variant required.
- [Enforce a Design Scale With a Custom Modifier (Recipe · Astro)](https://salty-css.dev/recipes/astro/custom-modifier-scale/): Add a `defineConfig` modifier that rewrites `padding: "px:16"` into `1rem` — every developer is on the same scale without anyone policing PRs.
- [A Per-Tenant Brand Color Resolved on the Server (Recipe · Astro)](https://salty-css.dev/recipes/astro/runtime-tenant-theme/): Use `defineRuntime` to take a brand color from a per-request lookup (database, env, CMS) and emit scoped CSS inline next to the element — no client styling runtime.
- [Source on GitHub](https://github.com/margarita-form/salty-css): Monorepo for @salty-css/* packages — file issues, browse source, release changelog.
- [Community Discord](https://discord.gg/R6kr4KxMhP): Chat with maintainers and other Salty CSS users.
- [@salty-css/core on npm](https://www.npmjs.com/package/@salty-css/core): The compiler package — published as (0.4.0).