Repository navigation
feat: tailwind v4 - #324
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request upgrades the project from Tailwind CSS v3 to v4, representing a significant modernization of the styling infrastructure. The upgrade adopts Tailwind v4's new CSS-first configuration approach, replacing JavaScript-based configuration with CSS @import and @source directives.
Changes:
- Replaced
tailwind.config.js/tailwind.config.tswith CSS-based configuration using@sourcedirectives in all projects - Removed the
sqlroomsTailwindPresetTypeScript function in favor of a CSS preset file (packages/ui/tailwind-preset.css) - Migrated from PostCSS + Autoprefixer to the new
@tailwindcss/viteplugin for Vite projects (Next.js projects use@tailwindcss/postcss) - Moved CSS custom properties out of
@layer baseto root level as required by Tailwind v4 - Updated documentation with migration guide and new installation instructions
Reviewed changes
Copilot reviewed 120 out of 121 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/tailwind-preset.css | New CSS-based preset replacing the TypeScript configuration |
| packages/ui/src/tailwind-preset.ts | Removed - no longer needed with CSS-first approach |
| packages/ui/src/index.ts | Removed export of deprecated sqlroomsTailwindPreset |
| packages/ui/package.json | Updated peer dependency from Tailwind v3 to v4, removed autoprefixer |
| packages/ui/components.json | Updated config path to point to CSS file |
| knip.json | Added CSS file ignoring and formatted arrays |
| examples/*/vite.config.ts | Added @tailwindcss/vite plugin to all Vite projects |
| examples/*/tailwind.config.ts | Removed - replaced by CSS configuration |
| examples/*/src/index.css | Added @source directives and removed @layer base wrapper |
| examples/*/postcss.config.js | Removed - no longer needed with Vite plugin |
| examples/*/package.json | Updated dependencies: added @tailwindcss/vite, removed autoprefixer and postcss, upgraded tailwindcss to v4 |
| examples/nextjs/postcss.config.mjs | Updated to use object syntax for PostCSS plugin configuration |
| examples/nextjs/app/globals.css | Added @source directives for Next.js-specific paths |
| examples/ai-nextjs/postcss.config.mjs | Updated to use object syntax for PostCSS plugin configuration |
| examples/ai-nextjs/app/globals.css | Added @source directives for Next.js-specific paths |
| apps/sqlrooms-cli-ui/* | Applied same migration pattern as examples |
| docs/upgrade-guide.md | Added comprehensive migration guide for v3 to v4 |
| docs/theming.md | Updated CSS examples to remove @layer base wrapper |
| docs/getting-started.md | Updated Tailwind installation instructions to reference v4 |
| README.md | Updated Tailwind installation instructions to reference v4 |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Too many files changed for review. ( |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 198 out of 199 changed files in this pull request and generated 2 comments.
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@dmitriy-kostianetskiy I've opened a new pull request, #327, to work on those changes. Once the pull request is ready, I'll request review from you. |
|
@copilot can you make sure all deprecated tailwind classes are replaced with the new ones (tailwind v3 -> v4 migration) |
|
@dmitriy-kostianetskiy I've opened a new pull request, #329, to work on those changes. Once the pull request is ready, I'll request review from you. |
|
Important Review skippedToo many files! This PR contains 217 files, which is 67 over the limit of 150. You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
This one is blocking me from using the /recharts package! |
We hope to land it next week |
e66cf42 to
f47e740
Compare
…d-v4 Signed-off-by: Ilya Boyandin <[email protected]>
|
🤝 |
Looks like it works :)