業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話

ARANK

はじめにはじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリングには Tailwind CSS を採用しており、プロジェクト開始から 1 年半が経過してコードベースは 200 ファイルを超える規模になっていました。私が入ったタイミングでは、すでにフロントエンドの技術選定に関わったメンバーは異動しており、デザイナーも不在。スタイルのルールが不明確なまま、画面数とコードが増え続けている状態でした。初めてプロダクトに触れたとき、「画面ごとに見た目が少しずつ違っていて、統一感がないな」と感じました。業務に支障はないものの、文字サイズやフォントの太さ、余白の取り方が画面ごとにバラついており、使い込むほど違和感が大きくなっていきました。入って 1 ヶ月ほどで、この違和感をチームに問題提起しました。ここから、フロントエンドの負債と本格的に向き合うことになりました。この記事では、チームで課題を整理し、CSS ライブラリを比較検討して Panda CSS への移行を決めるまで…