🐙

TailwindCSSのtranslate-xでのサイドバー制御

2025/01/22に公開

tailadminデモサイトでは、サイドバーを表示・非表示の切り替えは、translate-x-*で制御している。

サイドバーを表示する場合はtranslate-x-0を指定、サイドバーを非表示とする場合は-translate-x-fullを指定している。

サンプルのHTMLと実行結果は下記の通り。

<div class="p-2">
  <div class="translate-x-0">
    translate-x-0
  </div>
  <div class="translate-x-10">
    translate-x-10
  </div>
  <div class="-translate-x-10">
    -translate-x-10
  </div>
  <div class="-translate-x-full"> # -x軸方向にズレるため、画面から非表示となる
    translate-x-full
  </div>
</div>

Discussion