Dashboard – upgrade to Tailwind CSS v4

[Vaeshkar]

Fixed Tailwind CSS v4 compatibility in Vite build by updating PostCSS configuration:

• Add @tailwindcss/postcss dependency for v4 compatibility
• Update postcss.config.js to use @tailwindcss/postcss plugin
• Fix build errors caused by PostCSS plugin separation in v4
• Regenerate pnpm-lock.yaml with new dependencies

This resolves build failures when upgrading from Tailwind v3 to v4.

Summary by CodeRabbit

• Chores
  • Updated PostCSS configuration to use the latest Tailwind CSS PostCSS plugin for improved compatibility with current tooling.
  • Added the corresponding development dependency to the dashboard’s build tooling to align with the updated PostCSS setup.
  • Improves build consistency and future-proofs the styling pipeline without altering runtime behavior.
  • No user-facing changes; existing UI and styles remain unchanged.

[coderabbitai]

Walkthrough

Updated PostCSS configuration to use the @tailwindcss/postcss plugin and added it as a devDependency in dashboard/package.json. No other files or dependencies were modified.

Changes

Cohort / File(s)	Summary of Changes
PostCSS/Tailwind config update dashboard/package.json, dashboard/postcss.config.js	Added devDependency @tailwindcss/postcss (^4.1.13). Updated PostCSS config: replaced plugin key tailwindcss: {} with '@tailwindcss/postcss': {}; autoprefixer unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Dashboard – upgrade to Tailwind CSS v4" succinctly identifies the primary change (upgrading Tailwind to v4 for the dashboard). It is concise, specific, and aligns with the PR objectives and file changes (adding @tailwindcss/postcss and updating postcss.config.js). The phrasing is clear and informative for a teammate scanning history.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch vaeshkar/fix_dashboard_upgrade-tailwindcss_v4

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

dashboard/postcss.config.js (1)

3-5: Optional: remove autoprefixer — Tailwind v4's @tailwindcss/postcss handles vendor prefixes

Tailwind v4 (via Lightning CSS in @tailwindcss/postcss) performs vendor‑prefixing and modern‑syntax transforms, so you can remove autoprefixer from dashboard/postcss.config.js (and devDependencies) unless you author non‑Tailwind CSS that still requires it.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5377c72 and d0fa795.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• dashboard/package.json (1 hunks)
• dashboard/postcss.config.js (1 hunks)

🔇 Additional comments (1)

dashboard/package.json (1)

65-65: Tailwind v4 PostCSS split: correct dependency added and version-aligned.

@tailwindcss/postcss@^4.1.13 matches tailwindcss@^4.1.13. Good placement under devDependencies.

[coderabbitai]

⚠️ Potential issue

🧩 Analysis chain

Switched to '@tailwindcss/postcss' — required for Tailwind v4. LGTM.

Config shape is valid ESM under "type":"module".

Run to ensure no other packages still use the old tailwindcss PostCSS plugin:

---

🏁 Script executed:

#!/bin/bash
# Find all PostCSS configs and flag legacy plugin usage.
set -euo pipefail
fd -H -a -t f 'postcss.config.*' | while read -r f; do
  echo "== $f =="
  rg -nC2 -P "(tailwindcss:|require\\(['\"]tailwindcss['\"]\\))|@tailwindcss/postcss" "$f" || true
done

Length of output: 304

---

Update examples/react-router/postcss.config.js to use '@tailwindcss/postcss'
examples/react-router/postcss.config.js still contains tailwindcss: {} (line 3); replace it with @tailwindcss/postcss: {} so all PostCSS configs use the Tailwind v4 plugin.

🤖 Prompt for AI Agents

In dashboard/postcss.config.js around line 3, the PostCSS config uses the old
key `tailwindcss: {}`; update that entry to use the Tailwind v4 plugin key
`@tailwindcss/postcss: {}` so the file matches other PostCSS configs. Replace
the `tailwindcss` property name with `@tailwindcss/postcss` and keep the same
config object contents.