Bootstrap in One Breath

Five commands. Three config edits. One running app on your machine. The whole stack in one sitting.

The end state

By the end of this lesson you'll have a folder on disk that runs npm run dev and serves a React 19 app at http://localhost:5173 with TypeScript strict mode and Tailwind v4 utilities working. No screenshots, no copy-paste from a blog post that's six months out of date. Just the commands, the files, and the explanations.

Step 1 — scaffold

The Vite team maintains the React + TS template. It's the only scaffold the React docs recommend in 2026 for a non-meta-framework start.

Step 2 — install Tailwind v4

v4 ships as two npm packages: tailwindcss (the engine) and a build-tool integration. For Vite, that integration is @tailwindcss/vite. Two installs, one plugin line in vite.config.ts, one CSS import.

Step 3 — wire Tailwind into the CSS

v4 expects you to import Tailwind from your main CSS file using the native @import syntax. No @tailwind base; @tailwind components; @tailwind utilities; directives like v3 — those still work but the new way is one line.

Step 4 — confirm

Add a Tailwind utility class to a JSX element. If it renders styled, the chain works. If not, the failure mode is almost always 'CSS file not imported in main.tsx' or 'the @tailwindcss/vite plugin missing from vite.config.ts.' Two places to check.

Step 5 — strict TS

Vite's React + TS template already enables strict: true in tsconfig.app.json. We'll dig into what that means in lesson 4. For now, confirm it's there.

Read your generated files. The Vite scaffold gives you about a dozen files. Don't treat any of them as untouchable. vite.config.ts, tsconfig.json, tsconfig.app.json, tsconfig.node.json, src/main.tsx, src/App.tsx, src/index.css — open every one, read it once. The whole React stack is small enough to fit in your head. Make it fit.

Code

Five commands, top to bottom·bash

# 1. Scaffold a Vite + React 19 + TS project
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install

# 2. Add Tailwind v4 + the Vite plugin
npm install -D tailwindcss @tailwindcss/vite

# 3. Boot it
npm run dev

vite.config.ts — Tailwind plugin added·ts

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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    port: 5173,
  },
});

src/index.css — Tailwind v4 the CSS-first way·css

@import "tailwindcss";

/* Theme tokens land here in lesson 5. For now the import is enough
   — every Tailwind utility is available. */

src/App.tsx — sanity check·tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main className="min-h-screen flex items-center justify-center bg-slate-900 text-slate-100">
      <button
        onClick={() => setCount((n) => n + 1)}
        className="px-6 py-3 rounded-lg bg-cyan-500 text-slate-950 font-semibold hover:bg-cyan-400 transition-colors"
      >
        Tailwind + React 19: clicked {count} times
      </button>
    </main>
  );
}

Exercise

Run the five commands. Replace the default App.tsx with the sanity-check version above. Confirm the button renders styled (cyan background, hover effect) and the click counter increments. Then break each of the three likely-culprit lines on purpose (remove the @import, comment out the plugin, comment out the index.css import in main.tsx) and observe the failure mode each one produces. Restore everything when done.

Hint

Each break produces a different failure: missing @import → no Tailwind utilities work at all; missing plugin → similar but the CSS file shows no transform; missing main.tsx import → no styles at all (not even your own).

The end state

Step 1 — scaffold

Step 2 — install Tailwind v4

Step 3 — wire Tailwind into the CSS

Step 4 — confirm

Step 5 — strict TS

Code

External links

Exercise

Progress

Comments 0