こんにちは！アプリケーションサービス部ディベロップメントサービス 1 課の滝澤です。
本記事をご覧いただき、ありがとうございます。
はじめに
タイトルが批判みたくなってしまっておりますが、shadcn/ui は素晴らしいツールで私も大好きです。
後述しますが今回書くことは将来的に起こらなくなっていくと思いますが、実際に私が遭遇した問題を共有したいと思います。
前提
関係のあるツールのバージョンを書きます。
- React Router: 7.1.4
- tailwind css: 3.4.17
事象
shadcn/ui の Sidebar をインストール（npx shadcn@latest add sidebar）したら以下の事象が発生しました。
- build 成果物のスタイルが崩れる
原因と解決策
npx shadcn@latest add sidebar を行うと tailwind.config.ts に以下の設定が加わります。
※ その時の tailwind.config.ts で多少異なると思います。
この theme.extend.fontFamily.sans の中身は create-react-router で生成されたものですが、この quotes が不適切な形式に変わってしまっています。
そのため、この部分のみ revert してあげると解決します。
（補足 1）tailwind の fontFamily における quotes の扱い
公式ドキュメント（https://v3.tailwindcss.com/docs/font-family#customizing-your-theme）にある通り、スペースは自動的にエスケープしないため、"Inter var" のように quotes で囲む必要があります。
Note that Tailwind does not automatically escape font names for you. If you’re using a font that contains an invalid identifier, wrap it in quotes or escape the invalid characters.
（補足 2）将来的な解決策
※ 推測が入っております。
Tailwind CSS v4 が 2025 年の 1 月下旬に リリースされました。 これにより config ファイルの持ち方が変わった（zero configuration）ため、この問題は解消される可能性がございます。
まとめ
shadcn/ui の Sidebar を使おうとしたらスタイルが崩れてしまった問題について書きました。 将来的にはこの問題は解消されるかもしれませんが、Tailwind CSS v4 はリリースされたばかりで shadcn/ui の対応も canary の段階ですのでまだ直面する可能性があるかもしれないと思い、共有させていただきました。 この記事が少しでもお役に立てれば幸いです。
