AutofuseCSS (alpha)

React‑first CSS tokens and utilities with fluid scales, theming, and Tailwind plugin. Inspired by Automatic.css, designed for React/Next.js.

Install

pnpm add autofusecss

Stylesheet + Provider

import "autofusecss/styles.css"; import { AutofuseProvider } from "autofusecss/react";

export default function App() { return ( Salut! Fluid type and spacing via CSS variables. ); }

Tailwind Plugin

// tailwind.config.ts import autofuse from "autofusecss/tailwind";

export default { content: ["./src/**/*.{ts,tsx}"], plugins: [autofuse()], };

You can now use both Tailwind classes and af-* utilities (generated by the plugin):

Tokens API

import { defaultTokens, buildCssVariables } from "autofusecss"; const { css } = buildCssVariables(defaultTokens);

Utilities (M1 subset)

• Layout: af-container, af-stack-0/2/4/6/8
• Spacing: af-m-*, af-mx-*, af-my-*, af-mt/*/mr/mb/ml, negative: -af-m-*; same for padding af-p-*, af-px/*/py/pt/pr/pb/pl
• Typography: af-text-xs/sm/base/lg/xl/2xl/3xl/4xl/5xl/6xl/7xl
• Colors: af-text-{role}-{shade}, af-bg-{role}-{shade} for roles in tokens
• Density/theme variants (Tailwind): density-compact:, theme-dark:

Theming

• <AutofuseProvider theme="dark" /> or apply [data-theme="dark"] on any subtree.
• Provide custom tokens via the tokens prop to override defaults.

Build & publish (package)

pnpm --filter autofusecss build npm publish --access public