·2 min read

Getting Started with TanStack Start and Tailwind

Personal site setup: TanStack Start, React 19, file routes, Tailwind v4, and a Markdown blog without a CMS.

Tanstack StartTailwind

TanStack Start is a React full-stack framework on Vite and TanStack Router. With Tailwind v4 it fits content-heavy personal sites — profile, notes, printable resume — with enough interactivity that a pure static generator starts to fight you.

Why TanStack Start here

Two things matter: cold-load speed, and how cheap it is to add a page. Start ships SSR with file routes under src/routes/. Type-safe loaders and links mean a new section is a new route file.

I also run FreeTempMail, ToolifyNav, and StartOCR on the same stack. Patterns transfer: createServerFn, route loaders, Cloudflare deploys.

Blog posts stay simple: Markdown in src/content/blog/*.md, loaded with Vite import.meta.glob + gray-matter + marked so Workers never need a filesystem. Projects and meta are typed modules. No CMS until volume forces one.

Why Tailwind v4

Utilities keep styles next to markup. @theme holds design tokens as CSS variables. Tokens live in src/styles.css; layout in .tsx; prose in Markdown. Pairs cleanly with shadcn/ui.

Minimal setup

pnpm create @tanstack/start@latest my-site
cd my-site
pnpm add tailwindcss @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss(), tanstackStart(), viteReact()],
})

Then @import "tailwindcss"; in global CSS. Add a Markdown loader for notes; add @cloudflare/vite-plugin + Wrangler for the edge. Source: the repo.

Habits that stay small

  • Prefer SSR and server functions over client state unless interaction is real.
  • Self-host fonts; preload only above-the-fold faces.
  • Keep nav and layout boring so content stays the variable.
  • Personal-scale traffic → Cloudflare Workers free tier is enough.

You need a few tokens and a typed content module — not a design-system team. The stack should stay out of the way when you publish one more honest page.

← All notes