Build · styling workflow

Style with Tailwind CSS

Tailwind works with Presolve as a build-time CSS compiler. It scans the application’s static class names, writes ordinary CSS to the publication, and adds no client runtime or hydration requirement.

Static outputUtilities become CSS in the published stylesheet.

Compiler-safeUse literal utility names in component markup.

No browser setupThe browser receives finished CSS, not Tailwind tooling.

Install the compiler

Add Tailwind and its CLI as development dependencies. The official CLI is the right fit for Presolve’s static publication flow.

pnpm add -D tailwindcss @tailwindcss/cli

Import Tailwind in the application stylesheet

Keep app/tailwind.css as the Tailwind entry, define optional theme tokens there, and import project-specific rules from app/site.css. The build generates app/app.css as Presolve’s publication input.

@import "tailwindcss";@theme {--color-presolve-cyan: #75dcf5;--color-presolve-purple: #9d8bff;}

Build the final stylesheet

This site’s pnpm build runs Tailwind first, then Presolve publishes the generated app/app.css as immutable dist/app.<sha256>.css plus the byte-identical dist/app.css compatibility artifact. The compiler-owned document links the immutable path in its head.

tailwindcss -i ./app/tailwind.css -o ./app/app.css --minifypresolve build

{"scripts": {"css:build": "tailwindcss -i ./app/tailwind.css -o ./app/app.css --minify","css:watch": "tailwindcss -i ./app/tailwind.css -o ./app/app.css --watch","dev": "pnpm css:build && presolve dev","build": "pnpm css:build && presolve build"}}

Use pnpm css:watch in a second terminal when iterating on styles. For a single local startup, pnpm dev creates the first compiled stylesheet before starting the Presolve server. Each time Tailwind finishes writing app/app.css, Presolve republishes those exact bytes and hot-swaps the stylesheet without replacing the current document or component State.

Authored versus generated CSS

Once Tailwind owns the pipeline, keep app/tailwind.css and imported files such as app/site.css in source control, and add generated app/app.css to .gitignore. Presolve still treats the generated file as its exact publication input.

Use literal utilities in TSX

Tailwind discovers utility candidates from source text. Prefer complete, literal class names instead of constructing a utility string at runtime. This keeps both Tailwind’s output and Presolve’s compiler input deterministic.

<section className="rounded-xl border p-4"><h2 className="text-presolve-cyan">Build output</h2><p className="mt-2 text-slate-300">Static CSS, no browser setup.</p></section>

Publication boundary

Tailwind controls CSS only. Route discovery, component semantics, browser plans, and deployment inventory remain compiler-owned Presolve products. Keep generated app/app.css and the emitted dist/app*.css files out of application component markup and out of source control.

Tailwind, Vite, and Presolve are separate steps

Tool	Owns	Does not own
Tailwind CLI	Utility discovery, theme expansion, CSS generation, and minification.	Routes, components, runtime behavior, or stylesheet placement.
Presolve	Document head link, content-addressed CSS identity, route publication, and deployment inventory.	Tailwind utility semantics or source transformation.
Vite	Compiler-authorized package bundles and explicit adapter-owned physical entries.	The default global CSS transform or framework semantics.

Tailwind and accessibility

Keep focus styles visible, including for links and menu controls.
Build from narrow screens upward with responsive variants such as md: and lg:.
Use semantic HTML first; utilities should refine presentation, not replace heading, landmark, and form semantics.
Check long code blocks and tables at mobile widths after each substantial layout change.