Author Component Styles Inside .css.ts Files That Compile Once, Stream as Plain CSS Through RSC, and Skip the Runtime Bundle
Styling Salty CSS Components in Next.js
The styling section walks through every primitive Salty CSS gives you for authoring real CSS from TypeScript — from the basic styled() component and className() helpers, to design tokens, theming, font registration, variants, overrides, media queries, animations, and reusable templates. Start with Component styles and pick up the others as you need them.
In this section
- Salty CSS Basics for the Next.js App RouterUnderstand styled components, className, tokens, and global styles in Salty CSS.
- Design Tokens for Server and Client ComponentsDefine design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- Theming Across the App Router Without 'use client'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.
- Web Fonts in App Router LayoutsRegister web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- External CSS Imports in the App RouterPull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- Class Name Strings in Server and Client ComponentsGenerate reusable Salty CSS class strings with the className function for any element.
- Variants in the App RouterCompose variant, compound, and default styles to build adaptable components in Salty CSS.
- Extending Styled Components in Server and Client RoutesExtend styled components, swap elements, and override styles with props in Salty CSS.
- Media Queries for App Router LayoutsUse defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- Keyframes and Animations in Server and Client ComponentsDefine typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- Reusable Style Templates Across Server and ClientBuild reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.