ToCSS is a JavaScript runtime that reads the tocss HTML attribute and generates scoped CSS in the browser. ToCSS does not require a CSS file.

Browser Bundle

The quickest way to use ToCSS is the browser bundle with the default preset:

<button tocss="flex; aic; g:8px; p:12px 18px; bg:#7f50ed; c:white; rad:10px">
  Get started
</button>

<script src="https://cdn.jsdelivr.net/npm/@tocss/[email protected]/dist/tocss.min.js"></script>
<script>
  tocss.init();
</script>

The bundle includes:

• The ToCSS browser runtime
• The default property aliases
• The default presets
• Responsive and dark-mode support

Use an exact version such as 0.1.0 in production.

Install with npm

For Vite, Webpack, or another frontend build system, install the browser runtime and default preset:

npm install @tocss/vanilla @tocss/default

Register the preset before initializing ToCSS:

import { init, usePreset } from '@tocss/vanilla';
import defaultPreset from '@tocss/default';

usePreset(defaultPreset);
init();

You can then use the tocss attribute in your markup:

<div tocss="flex; aic; g:16px; p:24px">
  Hello ToCSS
</div>

ToCSS processes existing elements when init() runs and automatically processes elements added later.

Tailwind-Style Preset

Install the Tailwind-style preset instead of the default preset:

npm install @tocss/vanilla @tocss/tailwind

import { init, usePreset } from '@tocss/vanilla';
import tailwindPreset from '@tocss/tailwind';

usePreset(tailwindPreset);
init();

For a plain HTML page, use the standalone Tailwind-style bundle:

<script src="https://cdn.jsdelivr.net/npm/@tocss/[email protected]/dist/tocss-tailwind.min.js"></script>
<script>
  tocss.init();
</script>

Available Packages

Package	Purpose
@tocss/vanilla	Browser runtime and standalone browser bundles
@tocss/default	Default aliases, colors, screens, and presets
@tocss/tailwind	Tailwind-style aliases, screens, and presets
@tocss/core	Framework-neutral parser and rule engine

Current Limitations

• Official React and other framework adapters are not available yet.
• @keyframes is not supported yet.
• ToCSS requires JavaScript in the browser.
• Do not use npm install tocss; use the scoped @tocss/* packages.
• Do not add a ToCSS stylesheet. The runtime generates the required CSS.