Documentation

Salty CSS is a build-time CSS-in-TS library for React, Next.js and Astro. You author styles in .css.ts files, the compiler turns them into real CSS, and your runtime ships with no styling engine attached. Meow.

It's a good fit when you want typed styles, real design tokens, and theming that doesn't need a React provider — without giving up on the developer experience of writing CSS next to your component.

What you get

Typed styles — styled("button", { ... }) returns a typed component; variants become typed props.
Design tokens — defineVariables for static, responsive, and conditional tokens (the conditional ones are how theming works).
Theming without a provider — flip a data-theme attribute on <html> and every consumer of {theme.color} updates.
Templates — defineTemplates for reusable style bundles with their own variants.
Media queries that read like English — media.minWidth(720).and.dark.
Fluid sizing — defineViewportClamp for clamp()-based values that scale with the viewport.
Type-safe class names — className({ ... }) when you want the styles without the component wrapper.
A CLI — npx salty-css init / generate / build / up for the boring bits.

TL;DR — install it

Inside any React, Next.js or Astro project:

npx salty-css init

Then create a component in a *.css.ts file:

// /components/my-button.css.ts
import { styled } from "@salty-css/astro/styled";

export const Button = styled("button", {
  base: {
    padding: "0.75rem 1.25rem",
    borderRadius: "6px",
    background: "{theme.color}",
    color: "{theme.background}",
  },
});

…and use it like any other Astro component.

Where to go next

New here? → Quick Start walks you from init to a themed component with variants in about 15 minutes.
Adding it to a project? → Installation covers the per-framework wiring.
Need the reference? → styled, className, defineConfig.

Search the docs

Hit Ctrl + K (or ⌘ + K on macOS) anywhere in the docs to open the search modal — or click Search at the top of the sidebar. Matching is fuzzy: partial terms like variant, media or clamp are usually enough.

What's in the docs

Getting Started

Quick Start — install, your first component, variants, theming, fonts.
Installation — per-framework setup (Next.js, Vite, Webpack, Astro).
Usage — file suffixes, dev-time naming, DevTools.
Troubleshooting — the fix list for the most common issues.
CLI — use Salty CSS from the command line.
FAQ — short answers to the things people ask first.

Styling

Component styles — styled, className, and where each one fits.
Variables — design tokens with defineVariables (static, responsive, conditional).
Theming — dark mode and multi-theme without a provider.
Fonts — defineFont for local files and remote stylesheets.
Imports — pull in external CSS with defineImport.
Class styles — className for plain class-based styles.
Variants — prop-driven variants, compound, and anyOfVariants.
Overrides — extend components, swap elements, forward props with passProps.
Media queries — media queries, container queries, breakpoints.
Animations — keyframes, stagger, pause/resume.
Templates — reusable styles with defineTemplates.

Utilities

Viewport clamp — fluid responsive sizing.
Color function — manipulate colors at build time.
Modifiers — custom value transformers.

API reference

styled function — full API for the styled component factory.
className function — full API for class-based styles.
defineConfig — every option that lives in salty.config.ts.
define* factories index — one-page index of every factory.

Get support

Join the Salty CSS Discord server for help, or check the GitHub repository for source and issues.