0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

shadcn UI導入後の404エラー解決方法

Last updated at Posted at 2023-10-12

next.jsで"npx shadcn-ui@latest"を叩いた後に”npm run dev”したところ404エラーになりました。

解決法
どうやら上記コマンドを叩くとデフォルトの/src/app/globals.cssと別に、componentsディレクトリに新規のglobals.cssが生成されるようです。
また、components.jsonというshadcn UIの設定ファイルも同じく生成されているはずです。このファイルのtailwind:{"css":""}の箇所を以下のように書き換えることでエラーが解消され、正常にブラウザに表示されるようになりました。ポイントは適用させたいglobals.cssファイルのパスを正しく入力することです。srcディレクトリ、appディレクトリを使用していない場合はご自身の環境に合わせて適宜編集してください。

 "tailwind": {
-  "css": "app/globals.css",
+  "css": "src/app/globals.css",
 }

↓こちらを参考にしました
https://github.com/shadcn-ui/ui/issues/755

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?