Getting started

Requirements

• solid-js and @solidjs/web ^2.0.0-rc.5. solid-styled 1.0 targets Solid 2.0. For Solid 1.x, use the 0.x line.
• Node ^20.19.0 || >=22.12.0.
• A bundler that runs unplugin-solid-styled. With Vite, version 8 or newer.
• The css tag throws at runtime if the plugin did not compile the module.

Install

npm i solid-styled
npm i -D unplugin-solid-styled

yarn add solid-styled
yarn add -D unplugin-solid-styled

pnpm add solid-styled
pnpm add -D unplugin-solid-styled

Vite setup

// vite.config.js
import solid from '@solidjs/vite-plugin';
import solidStyled from 'unplugin-solid-styled';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    solid(),
    solidStyled.vite({
      prefix: 'my-app',
    }),
  ],
});

• solidStyled.vite() moves itself ahead of the Solid plugin, so the order in plugins does not matter. See Plugin order.
• By default the plugin compiles src/**/*.{jsx,tsx,ts,js,mjs,cjs}. See Configuration for the options.

TypeScript

Add the package types so <style jsx>, <style jsx global> and use:solid-styled type check. Either add a reference in a .d.ts file:

/// <reference types="solid-styled" />

Or add solid-styled to compilerOptions.types in your tsconfig.json:

{
  "compilerOptions": {
    "types": ["solid-styled"]
  }
}

A first component

import { createSignal } from 'solid-js';
import { css } from 'solid-styled';

export default function Counter() {
  const [count, setCount] = createSignal(0);

  css`
    button {
      color: ${count() % 2 === 0 ? 'red' : 'blue'};
      padding: 0.5rem 1rem;
    }
  `;

  return <button onClick={() => setCount((c) => c + 1)}>Count: {count()}</button>;
}

• The button selector only matches buttons written in Counter. See Scoping.
• The color is a CSS custom property, so the sheet stays the same when count changes. See Styling.

Other bundlers

unplugin-solid-styled is an unplugin, so it has an entry per bundler.

import solidStyled from 'unplugin-solid-styled';

solidStyled.rollup(options);
solidStyled.webpack(options);
solidStyled.esbuild(options);

• Only the Vite entry reorders itself. With every other bundler, put solid-styled before the plugin that compiles JSX.
• The full list of entries is in the API reference.

Next steps

• Styling covers css, <style jsx> and reactive values.
• Scoping covers :global, @global, nesting and use:solid-styled.
• SSR covers StyleRegistry and renderSheets.
• Component libraries covers publishing styled components.
• Configuration covers the plugin options.