Published on

tailwindcss+Reactでハンバーガー表示切り替え方法

tailwindcss でナビゲーションを作ったり設置したあとにスマホのメニュー表示非表示の動作どうするか忘れたのでメモ。

React のケースです。

  1. useState をインポート
import { useState } from 'react'
  1. 開け閉めように状態を定義する
const [isNavOpen, setIsNavOpen] = useState(false)
  1. 状態で CSS を切り替える
//例
 <div className={isNavOpen ? "block md:hidden" : "hidden md:block"}>

状態持たせて開けしめというシンプルさ。