Vite 8 + Tailwind 4 — Build & Style Philosophy

Vite — dev that doesn't lie

Webpack-era build tools maintained two builds: a slow production build and a fast-but-different dev build. The dev build often hid bugs that only showed up in prod. Vite collapsed that — dev is ESM-native, the browser asks for modules and Vite serves them on demand. Production is Rolldown (the new Rust-based bundler that replaces Rollup in Vite 8).

Practical effect for cwkPippa: a code change saves and the chat updates in <100ms. HMR preserves component state. The dev experience is the production experience plus instant reloads.

Tailwind 4 — utility-first, CSS-native config

Tailwind 4 ditched the JavaScript config in favor of CSS-native @theme blocks. Your design tokens live in CSS now — closer to where they're used, no separate Node round-trip to compute.

Why utility-first at all? Because in a real app you need to ship pixel-level differences fast, and 'find the right CSS class file to edit' is a death loop. p-4 rounded-lg bg-bg-elevated in the JSX next to the component is faster to read, faster to write, and faster to delete than the same styles in a sibling file.

Don't fight the framework: If you're tempted to write a custom CSS class for every component, you're using Tailwind like Bootstrap. Use the utilities. Extract patterns into components, not into CSS classes.

Code

vite.config.ts — proxy to backend in dev·ts

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    host: '0.0.0.0',
    proxy: {
      '/api': 'http://localhost:8000',
      '/avatars': 'http://localhost:8000',
    },
  },
});

Tailwind 4 — CSS-native theme tokens·css

@import 'tailwindcss';

@theme {
  --color-bg: #0d0d12;
  --color-bg-elevated: #16161e;
  --color-fg: #e8e8ee;
  --color-accent: #FF8FBE;
  --font-sans: 'Inter', system-ui;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme='light'] {
  --color-bg: #ffffff;
  --color-fg: #1a1a1f;
}

Vite — dev that doesn't lie

Tailwind 4 — utility-first, CSS-native config

Code

Progress