53ningen.com53ningen.com
Loading...

Tailwind チートシート

2024/02/18 20:37
2024/12/30 17:53
Programming
tailwind
see also: Tailwind CSS Cheat Sheet

レイアウト

Grid

レスポンシブなグリッドレイアウト

<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
</div>

Stack

基本的な記述

<div className="grid gap-2">
  <div>item 1</div>
  <div>item 2</div>
</div>