Commit 738d545
committed
chore: upgrade Tailwind CSS v3 → v4
Upgrades Tailwind CSS and related packages:
- tailwindcss: ^3.4.19 → ^4.2.1
- prettier-plugin-tailwindcss: ^0.6.10 → ^0.7.2
- @tailwindcss/vite: new (replaces PostCSS Tailwind plugin for Vite)
- autoprefixer: removed (v4 handles vendor prefixes automatically)
Migration steps performed (using official @tailwindcss/upgrade tool + manual fixes):
1. src/app.css: Migrated from @tailwind directives to CSS-first approach:
- @tailwind base/components/utilities → @import 'tailwindcss'
- plugins (typography, forms, container-queries) → @plugin directives
- content array → @source directive
- Added v4 compatibility base styles for default border-color
2. vite.config.ts: Added @tailwindcss/vite plugin (recommended over PostCSS for
Vite projects). Placed before sveltekit() for proper CSS processing order.
3. postcss.config.js: Removed tailwindcss and autoprefixer plugins (now handled
by @tailwindcss/vite and v4's built-in vendor prefixing).
4. tailwind.config.ts: Deleted — theme was empty (no customisations) and
plugins are now declared via @plugin in app.css.
No template changes needed: the project has no renamed utility usages
(shadow-sm, outline-none, ring, etc.) and no @apply in Sass files.
The Sass files (src/lib/scss/) are unaffected as they don't use Tailwind
directives.
All checks pass:
- svelte-check: 0 errors, 0 warnings
- build: success
- lint: success (Prettier + ESLint)
Closes #169
Part of epic #1741 parent 43e2a7d commit 738d545
6 files changed
Lines changed: 624 additions & 764 deletions
0 commit comments