Integrations

Integrations overview

Import the package once in your CSS and get a stylesheet that holds only what your app uses.

Install the package, import it once in your CSS, and the production stylesheet holds only what your app uses. The integration finds the stylesheet that imports Pico Reforged, reads your project's sources, and compiles the CSS for you. It works like @import "tailwindcss".

npm install @rusticstack/pico-reforged

/* src/app.css */
@import "@rusticstack/pico-reforged";

Pico Reforged is a plain CSS rewrite of Pico CSS v2.1.1 by Lucas Larroche (MIT). It is not the official Pico CSS.

Pick your setup

You use	Go to
Vite, Astro, SvelteKit, Nuxt, React Router, TanStack Start, Solid Start	Vite
Next.js, or any tool that reads `postcss.config`	Next.js and PostCSS
Hugo, Jekyll, Eleventy, Zola, Bun, plain HTML	Static sites and the purge CLI
htmx or Alpine.js on top of any of the above	htmx and Alpine

If you just want a stylesheet, skip all of this and use the CDN file:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@1/css/pico.min.css"
/>

The file names in css/ are the same as in Pico CSS v2.1.1, so a CDN link only needs the package name changed.

How it picks the rules

In development the full stylesheet is served. Nothing is scanned, so there is nothing to wait for.
In production the project is scanned and the stylesheet is compiled for the browser floor (Chrome and Edge 111, Firefox 128, Safari and iOS Safari 16.4).
The default mode is safe. A rule is dropped only when a class, an id or an attribute name it needs is nowhere in your sources. A tag name or an attribute value that was not seen never drops a rule. See Purge modes.
Rules outside the pico.* layers, which means your own CSS, are never touched.
A scan that finds no files never purges.

Configuration lives in the stylesheet

Options sit next to the import, as plain CSS. An unknown at-rule is valid CSS, and the plugin removes these rules from the output.

@import "@rusticstack/pico-reforged";

@pico {
  theme: jade;
  extras: tabs badge;
  purge: safe;
}

@source "../content";

The full list is in the Configuration reference.

What you can import

Import	Gives you
`@rusticstack/pico-reforged`	the full build
`@rusticstack/pico-reforged/classless`	the class-less build
`@rusticstack/pico-reforged/colors`	the `.pico-color-` and `.pico-background-` classes
`@rusticstack/pico-reforged/extras`	all opt-in extras
`@rusticstack/pico-reforged/extras/tabs`	one extra

The imports can sit in one file or be combined. layer(name), supports(...) and a media query after the specifier wrap the compiled CSS.

Without the plugin

The same @import still works in a bundler that has no Pico Reforged plugin. The style export condition points it at css/pico.css, the built file with the pico layers, lowered for the Chrome 111 and Safari 16.4 floor. You get the full, unpurged stylesheet in the default theme. The plugin adds the purge pass and your @pico options.