Astroでshadcnを導入しようとしたらスタックした話

はじめに

普段フルスタックエンジニアとして開発をしている私ですが、コーポレートサイトのコーディングに挑戦するために、初めてAstroを使ってみました。その際、UIコンポーネントライブラリとしてshadcnを導入しようとしたのですが、思わぬところでハマりました。

基本的には、以下のshadcnの公式ドキュメントを参考に進めていました。

🔗 shadcn + Astro の導入手順

しかし、手順 5 の部分で違和感がありました。

違和感ポイント

npx astro add tailwind を実行すると、自動的に styles/global.css が作成されました。しかし、shadcnのドキュメントでは styles/globals.css を作成するように指示されており、さらに記載されている内容も異なっていました。そのまま 手順 4 の import 文を記述したところ、次のようなエラーが発生しました。

Cannot find module '@/styles/globals.css' imported from '/Users/koji/develop/rebelion/src/layouts/Layout.astro'

解決方法

shadcnのドキュメントではなく、Astro公式のドキュメント を参考にして設定を進めることで解決しました。

🔗 Astro公式 - Tailwind CSSの導入

まとめ

Google検索をすると、shadcnのドキュメントが上位に表示されるため、それを参考に進めがちですが、実際の設定方法はAstroの公式ドキュメントに従う方が確実 です。shadcnの指示通りに進めると、globals.css のパスが異なりエラーの原因になるため、注意が必要です。