On this page

TanStack Start Installation

Starwind supports TanStack Start with Vite. The CLI does not configure the Rsbuild starter path.

Requirements

React and React DOM 18 or newer.
@tanstack/react-start in the project dependencies.
vite.config.* with the existing @tailwindcss/vite plugin.
src/routes/__root.* and an existing src/styles.css or src/app.css stylesheet.

Create a TanStack Start Project

Skip this step when the project already exists. The current TanStack CLI creates a Vite-backed Start project and includes Tailwind CSS in its default starter.

pnpm dlx @tanstack/cli@latest create my-app

npx @tanstack/cli@latest create my-app

yarn dlx @tanstack/cli@latest create my-app

Initialize Starwind

cd my-app
pnpx starwind@latest init --defaults

cd my-app
npx starwind@latest init --defaults

cd my-app
yarn dlx starwind@latest init --defaults

Starwind detects @tanstack/react-start, the Vite config, src/routes/__root.*, and the global stylesheet before it changes the project. It installs the React adapter and uses these paths:

Purpose	Path
Styled components	`src/components/starwind`
Shared utilities	`src/lib/utils`
Starwind stylesheet	`src/styles/starwind.css`
Theme initialization owner	`src/routes/__root.*`

The CLI imports the Starwind stylesheet into the existing global stylesheet. Existing @charset and @import rules remain in place. The direct @import "tailwindcss" rule moves into the shared Starwind stylesheet so Tailwind is loaded once.

Add and Render Button

pnpx starwind@latest add button

npx starwind@latest add button

yarn dlx starwind@latest add button

import { createFileRoute } from "@tanstack/react-router";

import { Button } from "@/components/starwind/button";

export const Route = createFileRoute("/")({
  component: Home,
});

function Home() {
  return <Button>Hello from TanStack Start</Button>;
}

Framework Wiring

Complete the shared manual setup with the React adapter. Set @/* to ./src/* and keep the framework’s existing Vite plugins. The current starter config includes the following plugin order:

import tailwindcss from "@tailwindcss/vite";
import { devtools } from "@tanstack/devtools-vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: { tsconfigPaths: true },
  plugins: [devtools(), tailwindcss(), tanstackStart(), viteReact()],
});

Import Starwind from the existing application stylesheet.

@import "./styles/starwind.css";

/* Existing application styles remain here. */

The current starter already places an equivalent inline prepaint script before HeadContent. Keep that existing script. When the root document has no theme initializer, place ThemeInitScript before HeadContent as shown here.

import { ThemeInitScript } from "@starwind-ui/react/theme";
import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";

export const Route = createRootRoute({
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeInitScript />
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

Initialization preserves an existing Starwind ThemeInitScript. It also recognizes the previous inline Starwind prepaint script and avoids adding a second initializer. Keep one theme initialization owner in the root document.

Support Boundaries

The automatic setup path requires Vite and an existing @tailwindcss/vite plugin. It rejects an incomplete Start project before package installation or file changes. Rsbuild-based TanStack Start projects are outside the current CLI support boundary.

See Dark Mode for theme controls.