Commit 2d99c76
committed
Merge #180: chore: upgrade Tailwind CSS v3 → v4
738d545 chore: upgrade Tailwind CSS v3 → v4 (Jose Celano)
Pull request description:
## Overview
Upgrades Tailwind CSS from v3 to v4 — a ground-up rewrite with a CSS-first configuration model.
Part of epic #174.
Closes #169
## Package Changes
| Package | From | To |
|---------|------|----|
| `tailwindcss` | `^3.4.19` | `^4.2.1` |
| `prettier-plugin-tailwindcss` | `^0.6.10` | `^0.7.2` |
| `@tailwindcss/vite` | — | `^4.2.1` (new) |
| `autoprefixer` | `^10.4.24` | **removed** (v4 handles this automatically) |
The plugin packages (`@tailwindcss/typography`, `@tailwindcss/forms`, `@tailwindcss/container-queries`) stay at their current versions — they work with v4 via the new `@plugin` directive.
## Migration Details
Used the official `@tailwindcss/upgrade` tool for the initial migration, then applied manual fixes.
### [src/app.css](src/app.css)
- `@tailwind base/components/utilities` → `@import 'tailwindcss'`
- Plugins moved from `tailwind.config.ts` → `@plugin` directives
- `content` array migrated to `@source` directive
- Added v4 compatibility base styles for default `border-color` (was `gray-200`, now `currentColor`)
### [vite.config.ts](vite.config.ts)
- Added `@tailwindcss/vite` plugin (recommended for Vite projects over PostCSS)
- Placed before `sveltekit()` for correct CSS processing order
### [postcss.config.js](postcss.config.js)
- Removed `tailwindcss` and `autoprefixer` plugins (both now handled internally by `@tailwindcss/vite`)
### tailwind.config.ts — **deleted**
- Theme had no customizations (empty `extend: {}`)
- Plugins are now declared via `@plugin` in `app.css`
## What Was NOT Needed
- **No template changes**: the codebase doesn't use any renamed utilities (`shadow-sm` → `shadow-xs`, `outline-none` → `outline-hidden`, `ring` → `ring-3`, etc.)
- **No Sass changes**: `src/lib/scss/` files and `<style lang="scss">` component blocks are unaffected — they use pure Sass features and no `@apply`
## Testing Checklist
- [x] `svelte-check`: 0 errors, 0 warnings
- [x] `npm run build`: success
- [x] `npm run lint`: success (Prettier + ESLint)
- [x] Pre-commit hooks pass
- [ ] Visual review in browser — all pages render correctly
- [ ] Typography styles apply correctly (prose classes)
- [ ] Form styles work
- [ ] Container queries work
- [ ] Responsive layouts work
ACKs for top commit:
josecelano:
ACK 738d545
Tree-SHA512: 598bb18cb71e76cbac3d1961b94e7e2ade212f30b7590f0c4a69d7dc6e8f3fb21db33e3d26b6cac11e2e2730b76ee5280b60d457f0a14dfbb4c875a38445a5b66 files changed
Lines changed: 624 additions & 764 deletions
0 commit comments