Tailwind CSS v4 in SvelteKit — Clean Setup and Tips

Tailwind v4 simplifies configuration and leans on CSS features like @theme and @plugin.

Minimal Setup

/* src/app.css */
@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui;
}

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ plugins: [tailwindcss(), sveltekit()] });

Better Markdown Typography

Use the Typography plugin and add small refinements:

.prose :where(code):not(:where(pre *)) { @apply rounded bg-slate-100 px-1.5 dark:bg-slate-800; }
.prose :where(pre) { @apply rounded-xl border bg-slate-900/95 p-4 shadow; }
.prose :where(img) { @apply rounded-xl shadow; }

Takeaway

Keep it minimal. Let the defaults work, then layer tasteful blog-specific polish.