はじめに
Supabase の公式ドキュメントを参考に、Supabase + Next.js のプロジェクトをセットアップしていたところ、 shadcn/ui の導入中にエラーが発生したので、その内容と解決方法を記しておきます。
問題
shadcn/ui のセットアップを行うコマンド
npx shadcn-ui@latest init
を実行した後、以下のようなエラーが出ました。
- app/globals.css
Syntax error: The `border-border` class does not exist. If `border-border` is a custom class, make sure it is defined within a `@layer` directive.
> 1 | @tailwind base;
| ^
2 | @tailwind components;
3 | @tailwind utilities;
このエラーは、border-border という CSS クラスが Tailwind CSS には存在しないことを示しています。
解決方法
プロジェクトルートに tailwind.config.js ファイルが生成されていないかチェックしてください。
.ts ではなく .js です！
tailwind.config.js ファイルがあれば削除しましょう。
👆 このイシューを見る限り、同様のエラーがかなり発生しているようです。
（詳細な原因は分かりませんが、おそらく eslint によって引き起こされている？）
参考
- shadcn/ui リポジトリの issue
- shadcn/ui 公式ドキュメント（Next.js）
- Supabase 公式ドキュメント