Skip to content

Commit 2d99c76

Browse files
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: 598bb18cb71e76cbac3d1961b94e7e2ade212f30b7590f0c4a69d7dc6e8f3fb21db33e3d26b6cac11e2e2730b76ee5280b60d457f0a14dfbb4c875a38445a5b6
2 parents 43e2a7d + 738d545 commit 2d99c76

6 files changed

Lines changed: 624 additions & 764 deletions

File tree

0 commit comments

Comments
 (0)