Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tailwind CSSで爆速デザインマークアップ!

Tailwind CSSで爆速デザインマークアップ!

2020年7月18日にYouTube Liveで開催された「サマーインターン前にツヨツヨになっちゃおうの会」で登壇した際の資料です。
https://connpass.com/event/181419/

Twitter: https://twitter.com/920oj
Web: https://920oj.net/
Contact: oj[at]920oj.net

おーじぇい

July 18, 2020
Tweet

Other Decks in Programming

Transcript

  1. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に

    .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける
  2. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に

    .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける コンポーネントクラス 大きく区切る
  3. Bootstrap VS Tailwind CSS .btn: ボタンの形・フォントウェイト、margin/paddingなど .btn-primary: ボタンの色 .bg-blue-500 背景色をblue-500に

    .hover:bg-blue-700 ホバーしたら背景色blue-700 .text-white 文字の色は白に .font-bold 文字のを太字に .py-2 y方向paddingを2(0.5rem) .px-4 x方向paddingを4(1rem) .rounded まるみをつける ユーティリティクラス 部品ではなく効用