fix: switch to @tailwindcss/vite for Vite 8 compatibility by dejanvasic85 · Pull Request #679 · dejanvasic85/notes

dejanvasic85 · 2026-03-23T21:43:45Z

Summary\n- Production deployments have been failing since Vite 8 was merged (PR #656). Vite 8 uses Rolldown, whose built-in postcss-import handler intercepts @import 'tailwindcss' and tries to resolve it as a literal file path, causing ENOENT errors.\n- Switches from @tailwindcss/postcss to @tailwindcss/vite (the recommended approach for Tailwind v4 + Vite) and removes the now-unnecessary postcss.config.js.\n\n## Test plan\n- [ ] Verify vite build succeeds without the PostCSS ENOENT error\n- [ ] Verify production deployment completes successfully\n- [ ] Verify Tailwind styles render correctly in the deployed app\n\nhttps://claude.ai/code/session_01NrZ2h3jXqwAzd1Mx1Und4f

Summary by CodeRabbit

Chores
- Switched Tailwind build integration to the Vite plugin system, improving build compatibility and performance.
- Removed legacy PostCSS configuration related to the prior Tailwind setup.
- Split the build workflow into a standard build and a separate migrate-enabled build; CI now runs a full application build during the build job and uses the migrate-enabled build in the test job.

… compatibility Vite 8 uses Rolldown which has a built-in postcss-import handler that intercepts `@import 'tailwindcss'` and tries to resolve it as a file path, causing ENOENT errors. Switching to the Vite plugin approach avoids this by handling Tailwind CSS processing directly in the Vite pipeline. - Replace @tailwindcss/postcss with @tailwindcss/vite in package.json - Add tailwindcss() plugin to vite.config.ts - Remove postcss.config.js (no longer needed) https://claude.ai/code/session_01NrZ2h3jXqwAzd1Mx1Und4f

coderabbitai · 2026-03-23T21:44:09Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 96ad8bf1-cea1-40b4-920b-586303757a49

📥 Commits

Reviewing files that changed from the base of the PR and between afb49f8 and 3a46437.

📒 Files selected for processing (2)

.github/workflows/ci.yml
package.json

✅ Files skipped from review due to trivial changes (1)

.github/workflows/ci.yml

🚧 Files skipped from review as they are similar to previous changes (1)

package.json

📝 Walkthrough

Walkthrough

Replaces PostCSS-based Tailwind setup with the Vite Tailwind plugin, removes postcss.config.js, updates package.json (devDependency and build scripts), registers the plugin in vite.config.ts, and adjusts CI to run full builds (including a migrate-enabled build in one job).

Changes

Cohort / File(s)	Summary
Tailwind Build Integration `package.json`, `vite.config.ts`, `postcss.config.js`	Swapped PostCSS integration for `@tailwindcss/vite`: replaced devDependency, removed `postcss.config.js`, and added the Tailwind Vite plugin to Vite's `plugins`. Also updated `package.json` scripts (`build` now runs `prisma generate` + `vite build`; added `build:migrate` to include `prisma migrate deploy`). Review plugin ordering and any PostCSS-dependent tooling.
Continuous Integration `.github/workflows/ci.yml`	CI `build` job now runs `npm run build` after unit tests. Playwright/test job’s build step uses `npm run build:migrate` instead of `npm run build`, so the test container performs the migrate-enabled build. Verify runner environment and migration expectations.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I nibbled old configs, found a Vitey tune,

Swapped a plugin, waved a PostCSS spoon.
Scripts re-stitched, CI hums the new song,
Migrations march when builds roll along. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title directly addresses the primary change: switching from `@tailwindcss/postcss` to `@tailwindcss/vite` for Vite 8 compatibility. It accurately summarizes the core fix that resolves production deployment failures.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch claude/fix-vite-deployment-jR6b5

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@package.json`:
- Line 33: Update the `@tailwindcss/vite` dependency version to a release that
supports Vite 8 (e.g., change "@tailwindcss/vite": "^4.1.8" to "^4.2.2" or
later) in package.json, then reinstall dependencies (npm/yarn/pnpm) to refresh
the lockfile and verify the project builds/tests with Vite ^8.0.0; ensure any
references to "@tailwindcss/vite" in tooling config remain compatible after the
upgrade.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: df721ead-8721-4834-9e2f-e2dc777d6d10

📥 Commits

Reviewing files that changed from the base of the PR and between f10a5dd and 68dd45f.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

package.json
postcss.config.js
vite.config.ts

💤 Files with no reviewable changes (1)

postcss.config.js

The vite-plugin-svelte v7 upgrade broke the build but was automerged because the Check and test job never ran `npm run build`. Adding it ensures build failures are caught before merge. https://claude.ai/code/session_01NrZ2h3jXqwAzd1Mx1Und4f

@tailwindcss/vite 4.1.x only supports vite ^5.2.0 || ^6 || ^7. Vite 8 support was added in 4.2.2 via tailwindlabs/tailwindcss#19790. https://claude.ai/code/session_01NrZ2h3jXqwAzd1Mx1Und4f

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.github/workflows/ci.yml:
- Around line 43-44: The CI build job is invoking the general "npm run build"
which triggers "prisma migrate deploy" and mutates the DB; change the workflow
to call a migration-free build script (e.g., replace "npm run build" with "npm
run build:ci" in the job) and add a package.json script "build:ci" that runs
only generation and bundling (e.g., use "prisma generate" and "vite build"
instead of migrations); keep any "prisma migrate deploy" calls confined to a
separate controlled job/environment that runs migrations explicitly.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6ecb0ee0-1b37-4ec2-83f2-fc54ae03d1d7

📥 Commits

Reviewing files that changed from the base of the PR and between 68dd45f and afb49f8.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

.github/workflows/ci.yml
package.json

🚧 Files skipped from review as they are similar to previous changes (1)

package.json

`npm run build` now only generates Prisma client and runs vite build. `npm run build:migrate` adds prisma migrate deploy for environments that need DB migrations (e.g. Playwright test job). This prevents concurrent migration runs when the build and test CI jobs execute in parallel against the same database. https://claude.ai/code/session_01NrZ2h3jXqwAzd1Mx1Und4f

dejanvasic85 temporarily deployed to preview March 23, 2026 21:45 — with GitHub Actions Inactive

coderabbitai Bot reviewed Mar 23, 2026

View reviewed changes

Comment thread package.json Outdated

claude added 2 commits March 23, 2026 22:22

ci: add build step to Check and test job

c488628

The vite-plugin-svelte v7 upgrade broke the build but was automerged because the Check and test job never ran `npm run build`. Adding it ensures build failures are caught before merge. https://claude.ai/code/session_01NrZ2h3jXqwAzd1Mx1Und4f

fix: upgrade @tailwindcss/vite to ^4.2.2 for Vite 8 peer dependency

afb49f8

@tailwindcss/vite 4.1.x only supports vite ^5.2.0 || ^6 || ^7. Vite 8 support was added in 4.2.2 via tailwindlabs/tailwindcss#19790. https://claude.ai/code/session_01NrZ2h3jXqwAzd1Mx1Und4f

dejanvasic85 temporarily deployed to preview March 23, 2026 22:25 — with GitHub Actions Inactive

coderabbitai Bot reviewed Mar 23, 2026

View reviewed changes

Comment thread .github/workflows/ci.yml

dejanvasic85 temporarily deployed to preview March 24, 2026 00:15 — with GitHub Actions Inactive

dejanvasic85 merged commit ab1f079 into main Mar 24, 2026
4 checks passed

dejanvasic85 deleted the claude/fix-vite-deployment-jR6b5 branch March 24, 2026 00:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: switch to @tailwindcss/vite for Vite 8 compatibility#679

fix: switch to @tailwindcss/vite for Vite 8 compatibility#679
dejanvasic85 merged 4 commits into
mainfrom
claude/fix-vite-deployment-jR6b5

dejanvasic85 commented Mar 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 23, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

dejanvasic85 commented Mar 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dejanvasic85 commented Mar 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 23, 2026 •

edited

Loading