Migrate to Tailwind CSS v4

[dmnktoe]

Summary

This change upgrades the project to Tailwind CSS v4 and removes the hand-rolled universal reset (* { box-sizing, margin, padding }) in favor of Preflight, which is the supported baseline in Tailwind.

What changed

• Build: PostCSS now uses @tailwindcss/postcss; autoprefixer was removed (handled by Tailwind v4).
• CSS: globals.css uses @import "tailwindcss", a CSS-first @theme block for the previous extend theme (colors, font-primary / font-secondary), and @custom-variant dark so dark: utilities follow the class strategy used by next-themes (see dark mode).
• Config: The old tailwind.config.ts was removed; theme lives in CSS per v4 best practice.
• Arbitrary var(--color-*): :root / .dark still set --color-bg and friends so fill-[var(--color-bg)] and similar keep working, while theme colors resolve from --palette-* to avoid circular var() references in @theme.
• v4 renames: Updated shadow-sm → shadow-xs and outline-none → outline-hidden where used; tests were updated accordingly.
• Base style: Restored a common expectation for buttons with cursor: pointer (v4 Preflight changes default button cursor).

Verification

• pnpm lint and pnpm test pass.
• pnpm run build fails in this environment on missing Strapi URL for /articles/[slug]; that appears to be an existing data-collection requirement, not caused by the Tailwind upgrade.

Notes

If you need the old v3 look for placeholder or border defaults, the upgrade guide documents optional base-layer snippets to restore them.

  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sentiment	Ready	Preview, Comment	Apr 23, 2026 9:41pm

[coderabbitai]

Warning

Rate limit exceeded

@dmnktoe has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 30 minutes and 21 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 30 minutes and 21 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1740f9b7-0d52-47b3-97fc-794abfeaf2c5

📥 Commits

Reviewing files that changed from the base of the PR and between f05ca54 and 2484bd2.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (11)

• package.json
• postcss.config.js
• src/__tests__/components/layout/Header.test.tsx
• src/__tests__/components/ui/Button.test.tsx
• src/components/layout/Header.tsx
• src/components/templates/NewsletterForm.tsx
• src/components/ui/Button.tsx
• src/components/ui/NavLink.tsx
• src/components/ui/ThemeToggle.tsx
• src/styles/globals.css
• tailwind.config.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch cursor/tailwind-v4-migration-7cd7

---

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.}

[sentry]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 65.70%. Comparing base (f05ca54) to head (2484bd2).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #284   +/-   ##
=======================================
  Coverage   65.70%   65.70%           
=======================================
  Files          62       62           
  Lines         729      729           
  Branches      153      153           
=======================================
  Hits          479      479           
  Misses        250      250           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.