configuration

The starter kit is designed to work with zero configuration out of the box. This guide explains every config file and how to customise them for your project.

vite.config.ts

The Vite configuration is the central hub connecting Tailwind CSS, React, and Vike together. Plugin order matters: Tailwind must come before React, and Vike should be last.

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vike from 'vike/plugin'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
plugins: [
  tailwindcss(),   // Process Tailwind CSS v4
  react(),         // Enable React fast refresh
  vike({
    prerender: true, // Generate static HTML at build time
  }),
],
})

Vike plugin options

Option	Type	Default	Description
prerender	boolean	false	Enable static site generation. Vike will crawl all pages and emit static HTML files at build time.
includeAssetsImportedByServer	boolean	false	Include assets imported in server-side code in the client bundle.
disableAutoFullBuild	boolean	false	Disable automatic server and client builds, useful for custom build orchestration.

renderer/+config.ts

The renderer config controls what data is passed from server to client during hydration. Only serialisable values can be passed via passToClient.

renderer/+config.ts

export default {
// Properties serialised and sent to the client for hydration
passToClient: ['pageProps', 'urlPathname'],
}

Adding items to passToClient increases the initial HTML payload. Only include data the client genuinely needs for interactivity or routing.

styles/global.css — Tailwind v4

Tailwind v4 uses a CSS-first approach. There is no tailwind.config.js. All customisation happens directly in your CSS file using @theme and @layer directives.

styles/global.css

@import "tailwindcss";

/* Override or extend the default theme */
@theme {
--color-brand: oklch(60% 0.2 250);
--font-sans: 'Inter', sans-serif;
--radius-xl: 1rem;
}

@layer base {
:root {
  --color-primary: 99 102 241;
  --color-sidebar-bg: 249 250 251;
  --color-sidebar-border: 229 231 235;
}

html {
  @apply antialiased;
}

/* Custom base styles */
h1, h2, h3 {
  @apply text-gray-900 font-bold tracking-tight;
}

a {
  @apply transition-colors;
}
}

@layer utilities {
/* Custom utilities */
.text-balance {
  text-wrap: balance;
}
}

Use @theme to define or override design tokens. These become CSS custom properties and generate Tailwind utility classes automatically. For example, --color-brand generates bg-brand, text-brand, border-brand, etc.

tsconfig.json

The TypeScript configuration is set up for modern ESNext output with Bundler module resolution, which is optimal for Vite-based projects. Strict mode is enabled for maximum correctness.

tsconfig.json

{
"compilerOptions": {
  "target": "ES2022",
  "lib": ["ES2022", "DOM", "DOM.Iterable"],
  "module": "ESNext",
  "moduleResolution": "Bundler",  // Required for Vite
  "jsx": "react-jsx",             // No need to import React manually
  "strict": true,                 // Recommended: catch more bugs
  "skipLibCheck": true,           // Speed up compilation
  "resolveJsonModule": true       // Allow importing .json files
},
"include": ["**/*.ts", "**/*.tsx"]
}

Environment variables

Create a .env.local file in the project root (gitignored by default) for local secrets:

.env.local

# Netlify deploy credentials
NETLIFY_SITE_ID=your-site-id-here
NETLIFY_AUTH_TOKEN=your-auth-token-here

# Optional: analytics or other integrations
PUBLIC_ANALYTICS_ID=UA-XXXXXX-X

Variables prefixed with PUBLIC_ or VITE_ are exposed to the client bundle. Never prefix secrets with these.