Styling overview

How to set up CSS — exact imports for three paths: plain, Tailwind, and StyleX from source.

Pick a path

PathGood forBuild step?
Plain CSSMost apps. Style with className, xstyle, or any CSS library.None.
TailwindApps on Tailwind v4. A CSS bridge maps utility classes to design tokens.None beyond Tailwind's own.
StyleX from sourceSwizzled (ejected) components. Raw StyleX source needs a compiler plugin.Yes — a StyleX bundler plugin.

All three resolve to the same design tokens and support theming and dark mode. You can mix them in one app.

Plain CSS

Install
bash
npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral
globals.css
css
@import "@astryxdesign/core/reset.css";
@import "@astryxdesign/core/astryx.css";
@import "@astryxdesign/theme-neutral/theme.css";

Done. Components work out of the box — style them with className, xstyle, or style. Swap theme-neutral for any theme package (astryx theme list shows what's available).

Tailwind

Install (add to an existing Tailwind v4 app)
bash
npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral
globals.css
css
@layer reset, theme, base, astryx-base, astryx-theme, components, utilities;
​
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "@astryxdesign/core/reset.css";
@import "@astryxdesign/core/astryx.css";
@import "@astryxdesign/theme-neutral/theme.css";
@import "@astryxdesign/core/tailwind-theme.css";
@import "tailwindcss/utilities.css" layer(utilities);

The @layer declaration is critical — without it, component styles outrank Tailwind utilities and className overrides stop working. The bridge (tailwind-theme.css) maps classes like text-primary, bg-surface, and rounded-lg to design tokens with no JS.

For Tailwind v3, see the layer workaround in astryx docs migration.

StyleX from source

Only needed when you swizzle a component (astryx swizzle <Component>) or write your own StyleX. The plain path already supports xstyle overrides — this path is for editing component internals.

Install
bash
npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral
globals.css
css
@layer reset, astryx-base, astryx-theme;
​
@import "@astryxdesign/core/reset.css";
@import "@astryxdesign/theme-neutral/theme.css";

No astryx.css — the StyleX compiler produces component styles from source. Add the plugin for your bundler:

BundlerPlugin
Webpack@stylexjs/webpack-plugin
Vite / Rollup@stylexjs/rollup-plugin
Babel (any)@stylexjs/babel-plugin + @stylexjs/postcss-plugin
Next.js (keep next/font)@stylexswc/nextjs-plugin

If a swizzled component renders with no styles and no error, a missing compiler is almost always why. See the StyleX Build Setup section of astryx docs styling for bundler config examples.

What each import does

ImportLayerPurpose
reset.cssresetCross-browser reset (box-sizing, margins, color-scheme). Zero specificity via :where().
astryx.cssastryx-basePre-compiled component styles. Required for plain and Tailwind. Omit when compiling from source.
theme.cssastryx-themeDesign tokens (colors, spacing, radius, typography) as CSS custom properties. Swap the package for a different theme.
tailwind-theme.css—Tailwind v4 bridge. Maps utility classes to design tokens. Pure CSS, no JS. Tailwind path only.

Further reading