Tailwind CSS のコンセプトを読んでいる（後で更新する）

状態

途中だけど公開する。また後で書き足す。

Tailwind CSS

tailwindcss.com

Utility-First のページ

tailwindcss.com

感想

• 書き方を覚えれば書きやすそう
• クラス名の与え方にブレが発生しなくなる
  • 他者と共同作業しやすくなる

メモ

• flexbox ユーティリティ
  • https://tailwindcss.com/docs/display#flex
  • flex, flex-shrink-0
• padding ユーティリティ
  • https://tailwindcss.com/docs/padding
  • p-6
• max-width ユーティリティ
  • https://tailwindcss.com/docs/max-width
  • max-w-sm
• margin ユーティリティ
  • https://tailwindcss.com/docs/margin
  • mx-auto
• background-color ユーティリティ
  • https://tailwindcss.com/docs/background-color
  • bg-white
• border-radius ユーティリティ
  • https://tailwindcss.com/docs/border-radius
  • rounded-xl
• box-shadow ユーティリティ
  • https://tailwindcss.com/docs/box-shadow
  • shadow-md
• width ユーティリティ
  • https://tailwindcss.com/docs/width
  • w-12
• height ユーティリティ
  • https://tailwindcss.com/docs/height
  • h-12
• space-between ユーティリティ
  • https://tailwindcss.com/docs/space
  • space-x-4

    • space-x-4 > * + *

    • --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));

• font size ユーティリティ
  • https://tailwindcss.com/docs/font-size
  • text-xl
• text color ユーティリティ
  • https://tailwindcss.com/docs/text-color
  • text-black
• font-weight ユーティリティ
  • https://tailwindcss.com/docs/font-weight
  • font-medium
• コロン区切り
  • hover や ブレークポイントの指定
• @apply