【Next.js/React】daisyuiのコンポーネントが当たらない症状の解決方法について

はじめに

Next.jsで開発中daisyuiのテーマカラーは当たっていましたが、cardコンポーネントが当たらない症状の解決につまずいたので記事にします。

「バージョン」
daisyui　5.0.38
tailwindcss　4.1.7

解決方法

.cssの記述をtailwind v4の記述に合わせる

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, lemonade;
}

参考

おわりに

Next.jsのデフォルトでv3のtailwindcssがインストールされ、その後バージョンを上げましたが設定がそのままになっていたことによる不整合が原因になっておりました。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼