TanStack Start

Step 1: Initialize Your TanStack Start Project

Begin the installation process by creating a new TanStack Start project. Follow the detailed instructions provided in the official Build a Project from Scratch guide on the TanStack Start website.

Important: At this stage, do not include Tailwind CSS during the project creation. We will proceed with installing Tailwind CSS v4 in the subsequent step of this guide.

Step 2: Integrate Tailwind CSS v4

Install the tailwindcss library and its necessary dependencies using your preferred package manager:

npm install tailwindcss @tailwindcss/postcss postcss

Step 3: Create the postcss.config.ts Configuration File

Create a postcss.config.ts file at the root of your project directory and add the following configuration. This file is used to configure PostCSS, which is required for processing Tailwind CSS.

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Step 4: Create and Configure app/styles/app.css

Create a new CSS file named app.css within the app/styles directory. In this file, import Tailwind CSS using the @import directive:

@import "tailwindcss" source("../");

Step 5: Import app.css into Your Root Component

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "TanStack Start Starter",
      },
    ],
    links: [
      {
        rel: "stylesheet",
        href: appCss,
      },
    ],
  }),
  component: RootComponent,
});

Step 6: Configure Path Aliases in tsconfig.json

Modify your tsconfig.json file to include path aliases. This configuration is necessary for correctly resolving module paths within your project, particularly for components:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "module": "ESNext",
    "target": "ES2022",
    "skipLibCheck": true,
    "strictNullChecks": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/*"]
    }
  }
}

Step 7: Execute the shadcn/ui Initialization Command

Run the shadcn/ui initialization command in your terminal to configure your project for using shadcn/ui components:

npx shadcn@canary init

Executing this command will perform several actions: it will create a components.json file in the root of your project, which stores your shadcn/ui configuration, and it will configure the necessary CSS variables within your app/styles/app.css file for theming.

Step 8: Begin Adding Components

You have now successfully completed the initial setup and are ready to begin adding individual shadcn/ui components to your TanStack Start project as needed.

npx shadcn@canary add button

Executing the command shown above will add the Button component files to your project structure. You can then import and use the component in your TanStack Start files as demonstrated below:

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

function Home() {
  const router = useRouter();
  const state = Route.useLoaderData();

  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}