fix: add @tailwindcss/vite and update dependencies - #199
Conversation
- Add @tailwindcss/vite plugin to vite.config.ts - Update to ESLint 10 and @eslint/js for compatibility - Update TypeScript, Vite, and other major dependencies - Add engines.node field for Node version requirement - Remove legacy .eslintrc.cjs config
![infinitcode-ai[bot]](https://avatars.githubusercontent.com/in/1117690?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary
The pull request migrates from Tailwind CSS v3 directives to v4's new @import and @theme syntax, and adds the @tailwindcss/vite plugin. The changes are largely correct and align with Tailwind v4 conventions, though the removal of @layer base and @apply may affect existing styles if not handled elsewhere. Overall, the migration appears safe and improves maintainability.
Review Verdict: ✅ Review Passed
The code is largely correct and follows Tailwind v4 best practices. No critical issues detected.
Changes
| File Path | Changes Detected |
|---|---|
src/index.css |
• Replaced @tailwind base, @tailwind components, @tailwind utilities with @import "tailwindcss" as per Tailwind v4.• Added @theme block to define custom color tokens using OKLCH color space.• Moved scroll-behavior: smooth from @layer base to direct html selector.• Replaced @apply directives in body with explicit CSS custom properties and transitions.• Updated dark mode selector from .dark body to :is(.dark) body.• Converted @layer utilities classes to @utility directives for text-balance and gradient-text. |
vite.config.ts |
• Added @tailwindcss/vite plugin to the Vite plugins array for Tailwind v4 integration. |
Code Style & Consistency
All identifiers follow project casing conventions.
Hot Take
"This PR is like swapping out a perfectly good toolbox for a shiny new one, but forgetting to check if the screws still fit. You've replaced
@applywith CSS variables, which is great, but now yourgradient-textutility is just a fancy way of saying 'I miss Tailwind v3'."
Example Commands:
@infinitcodeai review Trigger an instant AI PR review.
@infinitcodeai {prompt} Ask anything about your codebase.
Note: For additional settings, navigate to Infinitcode AI.
About
Automated review powered by Infinitcode AI
Report generated at 5/6/2026, 2:42:05 AM
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
To continue reviewing without waiting, purchase usage credits in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
WalkthroughThe PR modernizes the development environment by upgrading package.json dependencies (including ESLint, Playwright, Tailwind, and Vitest tooling), adds Node engine constraints, refactors src/index.css from Tailwind ChangesDevelopment Tooling and Styling Modernization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 0 |
| Duplication | 0 |
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
coderabbitai
Bot
added
the
dependencies
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| html { | ||
| scroll-behavior: smooth; | ||
| } | ||
| @theme { |
| .gradient-text { | ||
| @apply bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-teal-600; | ||
| } | ||
| @utility text-balance { |
| text-wrap: balance; | ||
| } | ||
|
|
||
| @utility gradient-text { |
| background-clip: text; | ||
| color: transparent; | ||
| background-image: linear-gradient(to right, var(--color-teal-400), var(--color-teal-600)); | ||
| } No newline at end of file |
| html { | ||
| scroll-behavior: smooth; | ||
| } | ||
| @theme { |
| .text-balance { | ||
| text-wrap: balance; | ||
| } | ||
| :is(.dark) body { |
| .gradient-text { | ||
| @apply bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-teal-600; | ||
| } | ||
| @utility text-balance { |
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
| @import "tailwindcss"; |
| @apply bg-dark-950 text-dark-100; | ||
| } | ||
| body { | ||
| background-color: var(--color-light-50); |
| } | ||
| body { | ||
| background-color: var(--color-light-50); | ||
| color: var(--color-light-900); |
There was a problem hiding this comment.
Pull request overview
This PR updates the frontend build/tooling setup to support Tailwind CSS v4 (via the @tailwindcss/vite plugin) and refreshes major dev dependencies, while also introducing a Node engine constraint.
Changes:
- Add
@tailwindcss/viteto the Vite plugin chain for Tailwind v4 support. - Migrate
src/index.cssfrom Tailwind v3-style directives (@tailwind,@layer,@apply) to Tailwind v4 CSS-first constructs (@import,@theme,@utility) and explicit CSS variables. - Update major dev dependencies and add a
package.jsonengines.nodeconstraint.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| vite.config.ts | Adds the Tailwind v4 Vite plugin to the build pipeline. |
| src/index.css | Migrates Tailwind usage to v4 CSS-first approach and introduces theme tokens/utilities. |
| package.json | Updates key tooling dependencies and adds a Node engines constraint. |
| package-lock.json | Partially updated, but currently not aligned with package.json dependency changes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @theme { | ||
| --color-light-50: oklch(97.95% 0.014 250.75); | ||
| --color-light-900: oklch(20.49% 0.038 264.38); | ||
| --color-dark-950: oklch(7.37% 0.019 285.85); | ||
| --color-dark-100: oklch(90.45% 0.02 285.85); | ||
| --color-teal-400: oklch(78.86% 0.162 174.21); | ||
| --color-teal-600: oklch(49.62% 0.104 181.28); | ||
| } |
| "vitest": "^4.1.5" | ||
| }, | ||
| "engines": { | ||
| "node": ">=20.19.0" |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@package.json`:
- Around line 55-56: The package.json engines entry is too permissive ("node":
">=20.19.0") and allows Node 21 and 23 which are incompatible with Vite 8/ESLint
10; update the "engines" -> "node" value to a tightened semver range that
permits Node 20 (>=20.19.0), Node 22 starting at 22.13.0, and Node 24+, e.g.
">=20.19.0 <21 || >=22.13.0 <23 || >=24", by editing the engines.node string in
package.json.
In `@src/index.css`:
- Around line 3-35: The CSS uses Tailwind v4 at-rules `@theme` and `@utility` which
the linters currently treat as unknown; update biome.json by enabling Tailwind
directive parsing (set css.parser.tailwindDirectives to true) so the CSS parser
accepts `@theme/`@utility, and update .stylelintrc.json to allow those at-rules
(e.g., configure the at-rule-no-unknown rule with ignoreAtRules:
["theme","utility"] or add them to an ignoreAtRules list) so Stylelint no longer
flags `@theme` and `@utility` as unknown.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: b13ab7a7-3fbd-4ac5-9754-0ccbf34d29bb
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
package.jsonsrc/index.cssvite.config.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Agent
- GitHub Check: Codacy Static Code Analysis
🧰 Additional context used
🪛 Biome (2.4.14)
src/index.css
[error] 3-10: Tailwind-specific syntax is disabled.
(parse)
[error] 27-29: Tailwind-specific syntax is disabled.
(parse)
[error] 31-35: Tailwind-specific syntax is disabled.
(parse)
🪛 Stylelint (17.10.0)
src/index.css
[error] 3-3: Unexpected unknown at-rule "@theme" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
[error] 27-27: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
[error] 31-31: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
| @theme { | ||
| --color-light-50: oklch(97.95% 0.014 250.75); | ||
| --color-light-900: oklch(20.49% 0.038 264.38); | ||
| --color-dark-950: oklch(7.37% 0.019 285.85); | ||
| --color-dark-100: oklch(90.45% 0.02 285.85); | ||
| --color-teal-400: oklch(78.86% 0.162 174.21); | ||
| --color-teal-600: oklch(49.62% 0.104 181.28); | ||
| } | ||
|
|
||
| body { | ||
| @apply bg-light-50 text-light-900 transition-colors duration-300; | ||
| } | ||
| html { | ||
| scroll-behavior: smooth; | ||
| } | ||
|
|
||
| .dark body { | ||
| @apply bg-dark-950 text-dark-100; | ||
| } | ||
| body { | ||
| background-color: var(--color-light-50); | ||
| color: var(--color-light-900); | ||
| transition: color 300ms, background-color 300ms; | ||
| } | ||
|
|
||
| @layer utilities { | ||
| .text-balance { | ||
| text-wrap: balance; | ||
| } | ||
| :is(.dark) body { | ||
| background-color: var(--color-dark-950); | ||
| color: var(--color-dark-100); | ||
| } | ||
|
|
||
| .gradient-text { | ||
| @apply bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-teal-600; | ||
| } | ||
| @utility text-balance { | ||
| text-wrap: balance; | ||
| } | ||
|
|
||
| @utility gradient-text { | ||
| background-clip: text; | ||
| color: transparent; | ||
| background-image: linear-gradient(to right, var(--color-teal-400), var(--color-teal-600)); | ||
| } No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Config files =="
fd -HI 'biome.json|biome.jsonc|stylelint.config.*|.stylelintrc*|package.json'
echo
echo "== Relevant settings =="
fd -HI 'biome.json|biome.jsonc|stylelint.config.*|.stylelintrc*|package.json' -x sh -c '
file="$1"
echo "--- $file ---"
rg -n -C2 "tailwindDirectives|ignoreAtRules|atRules|scss/at-rule-no-unknown|at-rule-no-unknown" "$file" || true
' sh {}Repository: shazzar00ni/docugen
Length of output: 221
🏁 Script executed:
cat -n biome.jsonRepository: shazzar00ni/docugen
Length of output: 4216
🏁 Script executed:
cat -n .stylelintrc.jsonRepository: shazzar00ni/docugen
Length of output: 1689
🏁 Script executed:
head -50 src/index.cssRepository: shazzar00ni/docugen
Length of output: 871
Add Tailwind v4 directive support to CSS lint configurations.
The @theme and @utility directives are valid Tailwind v4 syntax, but both biome.json and .stylelintrc.json lack the necessary configuration to recognize them:
- biome.json: The CSS parser config (lines 107–109) must enable Tailwind directive parsing by adding
"tailwindDirectives": trueto thecss.parserobject. - .stylelintrc.json: Stylelint must either ignore or explicitly allow the
@themeand@utilityat-rules. Add anat-rule-no-unknownrule configuration orignoreAtRuleslist in the config to prevent unknown at-rule errors.
Without these changes, CSS linting will fail on the new directives during CI.
🧰 Tools
🪛 Biome (2.4.14)
[error] 3-10: Tailwind-specific syntax is disabled.
(parse)
[error] 27-29: Tailwind-specific syntax is disabled.
(parse)
[error] 31-35: Tailwind-specific syntax is disabled.
(parse)
🪛 Stylelint (17.10.0)
[error] 3-3: Unexpected unknown at-rule "@theme" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
[error] 27-27: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
[error] 31-31: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/index.css` around lines 3 - 35, The CSS uses Tailwind v4 at-rules `@theme`
and `@utility` which the linters currently treat as unknown; update biome.json by
enabling Tailwind directive parsing (set css.parser.tailwindDirectives to true)
so the CSS parser accepts `@theme/`@utility, and update .stylelintrc.json to allow
those at-rules (e.g., configure the at-rule-no-unknown rule with ignoreAtRules:
["theme","utility"] or add them to an ignoreAtRules list) so Stylelint no longer
flags `@theme` and `@utility` as unknown.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
| "engines": { | ||
| "node": "^20.19.0 || ^22.13.0 || >=24.0.0" | ||
| }, | ||
| }, |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
Summary