Write Component Styles in .css.ts and Compile Them Alongside .astro Pages With Zero Client JavaScript
Styling Salty CSS Components in Astro
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 AstroUnderstand styled components, className, tokens, and global styles in Salty CSS.
- Design Tokens for .astro PagesDefine design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- Theming for .astro Pages and Hydrated IslandsAdd 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 .astro PagesRegister web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- External CSS Imports in Astro ProjectsPull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- Class Name Strings in .astro MarkupGenerate reusable Salty CSS class strings with the className function for any element.
- Variants in .astro and .tsx ComponentsCompose variant, compound, and default styles to build adaptable components in Salty CSS.
- Extending Styled Components in .astro IslandsExtend styled components, swap elements, and override styles with props in Salty CSS.
- Media Queries in .astro ComponentsUse defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- Keyframes and Animations in .astro Pages and IslandsDefine typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- Reusable Style Templates for .astro and IslandsBuild reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.