TanStack Start

Overview

TanStack Start is a Vite-based full-stack React framework, which means opsinjs's requirements are met the same way they are in Vite: Tailwind as a Vite plugin, an @/ alias that agrees between the bundler and TypeScript, and a single stylesheet whose order you control.

No published host, and this path is not tested

Two separate gaps. opsinjs.pensievelabs.org is not serving, so @opsinjs resolves only against a registry you point it at yourself. See Troubleshooting. And TanStack Start has not been exercised against opsinjs at all: the requirements below follow from the framework's architecture rather than from a build we have run, which is the more important of the two warnings.

Not written yet.

A verified end-to-end install, the exact root-route stylesheet placement for the current version, and the server-function boundary notes. This page will be rewritten from a real build rather than from inference before it leaves planned.

Meet the same four requirements

Nothing here is TanStack-specific except where the file goes.

Tailwind v4 via the Vite plugin

Confirm it generates classes on its own before adding opsinjs.

An `@/` alias in both `vite.config.ts` and `tsconfig.json`

They must point at the same directory. This is the most common cause of an import that resolves in the editor and fails at build, or the reverse.

The stylesheet on the root route

TanStack Start renders a document shell from the root route. The opsinjs token layer belongs in the single stylesheet that shell loads, after Tailwind and before your overrides. Next.js states that rule in full.

`@source` for the directory you copy components into

src/styles.css

@import "tailwindcss";
@import "./opsinjs.css";

@source "./components/opsinjs/**/*.{ts,tsx}";

Watch the boundary

TanStack Start distinguishes server functions from client rendering rather than marking whole modules, so the practical guidance differs slightly from the App Router. The loader work is fetching the value, resolving the range, and applying your clinical mapping. Put that in a server function, and keep the component that renders the result free of computation. That is the arrangement opsinjs assumes everywhere, and it happens to be the idiomatic one here.

Verify it worked

A copied component renders styled. Otherwise, @source.
Colours resolve through custom properties.
The document shell carries the stylesheet on every route, including error routes.
@/ imports resolve in the editor and at build.

Troubleshooting

Unstyled components. @source, as in every Vite-based setup. See Vite.

Alias resolves in one place but not the other. vite.config.ts and tsconfig.json disagree.

Something framework-specific goes wrong. This path is not yet tested, so please report it rather than working around it in silence. The report is what turns this page from inference into documentation. Community.

Vite covers the shared Vite mechanics in more detail.
Next.js has the CSS order rule stated in full.
Framework support is where this sits in the matrix.

TanStack Start

On this page