npm install @solid-primitives/styles
yarn add @solid-primitives/styles
pnpm add @solid-primitives/styles


Collection of reactive primitives focused on styles.

  • createRemSize - Create a reactive signal of css rem size in pixels.


Creates a reactive signal with value of the current rem size in pixels, and tracks it's changes.

#How to use it

It takes no arguments and returns a number signal.

import { createRemSize } from "@solid-primitives/styles";

const remSize = createRemSize();
console.log(remSize()); // 16

createEffect(() => {
  console.log(remSize()); // remSize value will be logged on every change to the root font size


This primitive provides a singleton root variant that will reuse signals, HTML elements and the ResizeObserver instance across all dependents that use it.

It's behavior is the same as createRemSize.

import { useRemSize } from "@solid-primitives/styles";

const remSize = useRemSize();
console.log(remSize()); // 16

#Server fallback

When using this primitive on the server, it will return a signal with a value of 16 by default. You can override this value by calling the setServerRemSize helper with a new value, before calling createRemSize or useRemSize.

import { setServerRemSize, createRemSize } from "@solid-primitives/styles";


const remSize = createRemSize();
console.log(remSize()); // 10 instead of 16 (only on the server!)


Live Site