Styling: CSS files

CSS files

CSS files in the Styling guide.

For agentsUpdated 2026-10-20

CSS is Vite's job, not the framework's. Import a stylesheet from any module and Vite processes, bundles and, in dev, hot-replaces it:

src/app.tsxtsx

export function App() {
  return <h1 class="title">Hello</h1>;
}

src/vite-env.d.tsts

/// <reference types="vite/client" />

src/main.tsxtsx

import { render } from "@shadow-js/web";
import { App } from "./app";
import "./index.css";

const root = document.getElementById("app");
if (root === null) throw new Error("Missing #app element");
render(() => <App />, root);

Plain .css is global. Name collisions are yours to avoid.
*.module.css files are CSS modules (a Vite feature): the import is an object mapping your class names to generated ones, so class={styles.title} works. Under strict TypeScript, add /// <reference types="vite/client" /> (the scaffolded src/vite-env.d.ts does) so the *.module.css import types resolve.
Sass, Less and PostCSS work when the preprocessor package is installed; configure them in vite.config.ts as for any Vite project.
ShadowJS adds no scoped styles and no CSS-in-JS runtime. There is no compile step for <style> blocks inside components.