Styling

Ossido leaves styling to Vite, so anything Vite supports works out of the box: a global stylesheet, CSS Modules, preprocessors, and Tailwind.

Tailwind

Scaffold with --tailwind (or pick it in the wizard) to get Tailwind preconfigured:

ossido new my-app --tailwind

That wires up two things. First, the @tailwindcss/vite plugin in ossido.config.ts:

import type { OssidoConfig } from '@ossido-labs/ossido/config';
import tailwindcss from '@tailwindcss/vite';

const config: OssidoConfig = {
  vite: { plugins: [tailwindcss()] },
};

export default config;

Second, a global stylesheet that pulls Tailwind in (Tailwind v4 style):

/* src/styles/global.css */
@import 'tailwindcss';

From there it's ordinary Tailwind - add @theme, @plugin, or @custom-variant directives in that stylesheet as needed.

Global CSS

Global styles live in a plain .css file - src/styles/global.css by convention

• loaded by importing it in your root layout:

// src/routes/layout.tsx
import '../styles/global.css';

Because the import sits in the root layout, the stylesheet applies to every route. Import it once there rather than per page.

CSS Modules & Vite CSS

Everything Vite does with CSS is available. Import a stylesheet for its side effects, or a *.module.css file for locally-scoped class names:

import styles from './card.module.css';

export function Card() {
  return <div className={styles.card}>...</div>;
}

Preprocessors (Sass, Less, ...) work once you install them and use the matching extension. To fine-tune CSS handling - CSS Modules class naming, preprocessor options - use the vite.css option in ossido.config.ts (it takes Vite's standard CSSOptions).

Lightning CSS

Ossido can process CSS with Lightning CSS - a fast, Rust-based transformer and minifier - in place of Vite's default PostCSS pipeline. It's opt-in and off by default. Turn it on in ossido.config.ts:

const config: OssidoConfig = {
  lightningcss: true,
};

That enables the transformer (dev and build) and the minifier (production build), using a sensible default set of browser targets.

Browser targets

Lightning CSS uses browser targets to decide what to autoprefix and which modern CSS features to lower. Override the default ('defaults') with a browserslist query:

const config: OssidoConfig = {
  lightningcss: { targets: '>= 0.25%, not dead' },
};

The query is used verbatim - a project's .browserslistrc or package.json browserslist field is not consulted.

What you get

• Faster CSS - transform and minify run in Rust instead of PostCSS + esbuild.
• Autoprefixing and modern-CSS lowering driven by your targets (nesting, custom media, colour functions, and so on).
• Minified production CSS bundles.
• CSS Modules keep working (*.module.css) - class names are scoped and hashed by Lightning CSS, and stay consistent between the emitted CSS and the server-rendered markup.

Notes

• PostCSS is disabled while Lightning CSS is on. A postcss.config.js (autoprefixer and the like) is ignored - prefixing comes from your targets instead.
• Vite plugins are unaffected. Plugins like @tailwindcss/vite (Tailwind v4) run as plugins, not through the CSS transformer, so they compose cleanly with it.
• Class hashing differs from Vite's default, so don't hard-code generated CSS-module class names (you shouldn't anyway).

Next: MDX · Back to React frontend