Zenn
Closed7

Tailwind CSS で CSS Grid Layout やっていくぞ

CSS
Tailwind CSS
frontend
Taiga KIYOKAWATaiga KIYOKAWA

CSS の分からない概念を新しく習得するとき、 CSS → Tailwind CSS で一個手間が生じているのがちょっと面倒

  1. 概念について理解する
  2. 通常の CSS での書き方を理解する
  3. Tailwind CSS での書き方に変換する
Taiga KIYOKAWATaiga KIYOKAWA

WIP: CSS Grid Layout with normal CSS

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: grid;
}

.item {
  
}
Taiga KIYOKAWATaiga KIYOKAWA

WIP: CSS Grid Layout with Tailwind CSS

<div class="grid">
  <div class="">A</div>
  <div class="">B</div>
  <div class="">C</div>
</div>
このスクラップは2023/04/30にクローズされました