Docs
TanStack Start

TanStack Start

Install and configure TanStack Start.

TanStack Start + Tailwind v4

Create project

Start by creating a new TanStack Start project by following the Build a Project from Scratch guide on the TanStack Start website.

Add Tailwind

Install tailwindcss and its dependencies.

pnpm add tailwindcss @tailwindcss/postcss postcss

Create postcss.config.ts

Create a postcss.config.ts file at the root of your project.

postcss.config.ts
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

Create app/styles/app.css

Create an app.css file in the app/styles directory and import tailwindcss

app/styles/app.css
@import "tailwindcss" source("../");

Import app.css

app/routes/__root.tsx
import type { ReactNode } from "react"
import { Outlet, createRootRoute } from "@tanstack/react-router"
import { Meta, Scripts } from "@tanstack/start"
 
import appCss from "@/styles/app.css?url"
 
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,
})

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths.

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

Run the CLI

Run the shadcn init command to setup your project:

pnpm dlx shadcn@canary init -d

This will create a components.json file in the root of your project and configure CSS variables inside app/styles/app.css.

That's it

You can now start adding components to your project.

pnpm dlx shadcn@canary add button

The command above will add the Button component to your project. You can then import it like this:

app/routes/index.tsx
import { Button } from "@/components/ui/button"
 
function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()
 
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Basic Starter

The Basic Starter template has Tailwind v3 already configured.

Run the CLI

Run the shadcn init command to setup your project:

pnpm dlx shadcn@canary init -d

This will create a components.json file in the root of your project and configure CSS variables inside app/styles/app.css.

That's it

You can now start adding components to your project.

pnpm dlx shadcn@canary add button

The command above will add the Button component to your project. You can then import it like this:

app/routes/index.tsx
import { Button } from "@/components/ui/button"
 
function Home() {
  const router = useRouter()
  const state = Route.useLoaderData()
 
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
LaravelGatsby