Inputタグ内のアイコン

inputタグ内に絶対値でアイコンを置く場合、微調整が必要になりレスポンシブでデザインが崩れがちになるので、divタグを１つのinputフィールドのようにデザインする。

    <div className="flex items-center gap-2 rounded-md ring-1 p-2 focus-within:ring-2 ring-gray-400">
      <Search className="size-4 text-gray-500"/>
      <input type="text" id="search" className="outline-none" placeholder="search" />
    </div>

• outline-none でinputタグからアウトラインを消す

x（クリア）ボタン：

• inputタグをtype="search"にすると文字入力後にデフォルトで xボタンが表示されるので、自分でクリア用のアイコン・状態管理を用意する必要は必ずしもない。

• しかし、視認性が低い点と対応しているブラウザの制限がある点から、type="text"にして自分で作った方が良い。

開閉UI：１つのアイコン

状態管理でアイコンをrotateさせたいような場合、アイコンは１つで良い。コードが簡潔になるだけでなく、tailwindのanimationも適用できる為

アイコン２つ：

{ isOpen ? <ChevronUp /> : <ChevronDown /> }

アイコン１つ：

      <ChevronRight
        onClick={onToggle}
        className={cn(
          "transition-transform duration-300",
          isOpen ? "rotate-0" : "rotate-180"
        )}
      />

デザインスタイル

Neobrutalism：

@layer components {
  .brutalism {
    @apply
      border-4 border-black
      shadow-[4px_4px_0_0_#000]
  }
}

• 強いコントラストを用いるスタイル

• 上記のカスタムクラスをCardやButton等に追加し、サイトの各要素の背景をはっきりとした色（例：黄色やピンク）にするとそれっぽくなる。

• https://www.behance.net/gallery/164728311/How-can-I-design-in-the-Neo-Brutalism-style

Glassmorphism：

@layer components {
  .glass {
    @apply 
    backdrop-blur-lg shadow-lg
    bg-linear-to-br from-white/10 to-white/5
  }
}

• ガラスっぽい透明感とぼかしを全面のUI（例：AccordionやCard）に適用させるスタイル

• 背景に依存するため、背景の選定が重要になる。

  • 単色は避けるべきで、最低でもgradientは必要

BentoGrid：

<div className="grid grid-cols-5 grid-rows-5 gap-4">
    <div className="col-span-2 row-span-2">1</div>
    <div className="col-span-2 row-span-3 col-start-1 row-start-3">3</div>
    <div className="col-span-2 row-span-5 col-start-3 row-start-1">4</div>
    <div className="row-span-5 col-start-5 row-start-1">5</div>
</div>

• 不規則なGridレイアウトで要素を配置するスタイル

• col-span と row-spanが重要

• sm以下はgrid-cols-1でいい。