# 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.
```bash
npx @tanstack/cli@latest create my-app
```
## Initialize Starwind
```bash
cd my-app
npx 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
```bash
npx starwind@latest add button
```
```tsx title="src/routes/index.tsx"
import { createFileRoute } from "@tanstack/react-router";
import { Button } from "@/components/starwind/button";
export const Route = createFileRoute("/")({
component: Home,
});
function Home() {
return ;
}
```
## Framework Wiring
Complete the [shared manual setup](/docs/getting-started/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:
```ts title="vite.config.ts"
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.
```css title="src/styles.css"
@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.
```tsx title="src/routes/__root.tsx"
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 (
{children}
);
}
```
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](/docs/getting-started/dark-mode/#tanstack-start) for theme controls.