はじめに

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 公式ドキュメント