【Next.js】ボタンのデザインを変えたいが修正箇所が分からない人へ

Taku

対象読者

Next.jsでボタンのデザインの変えたいが、どこを修正すればよいか分からない人

前提

・ Next.jsの雛形は作成済み

やり方

以下のコマンドを実行

npx shadcn-ui@latest add button

button.tsxが作成される。

primaryとdestructiveのcssは以下のように指定している。

primary: 
    "bg-sky-400 text-primary-foreground hover:bg-sky-400/90 border-sky-500 border-b-4 active:border-b-0",
destructive:
    "bg-green-500 text-destructive-foreground hover:bg-destructive/90",

以下の動画の、Buttons libraryの章で詳しく解説されているので良ければ参考までに　↓
https://www.youtube.com/watch?v=dP75Khfy4s4&t=737s