tailwindcss-test-with-cli

手動作成インデックス

目次:

• 基本関係
• ページレイアウト・フレーミング関連
  • サンプル HTML 系
    • ページレイアウト系
    • form 系
  • TailwindCSS の各クラスの挙動調査系
• 番外編

基本関係

• 最初に - ユーティリティー・ファースト
• HTML タグのカスタマイズと独自スタイルの定義方法

ページレイアウト・フレーミング関連

サンプル HTML 系

ページレイアウト系

• “TailwindCSS Hello world!”ベースHTMLコピペ用
• “公式にある通知表示のサンプル HTML の引用”
• よくあるページレイアウトのサンプル(ソース)
• ヘッダとフッタが上下に張り付くよくあるレイアウトのサンプル(ソース)

form 系

• よくありそうなログインコンポーネント
• “input type="text" 系インプットフィールドサンプル”
• “button - Bootstrap ライクなボタンサンプル”

TailwindCSS の各クラスの挙動調査系

• TailwindCSS の container クラスの意味と挙動(ソース)
• max-w-screen-** クラスとは何か(ソース)
• “leading-** クラスの見本”
• “font-**(font-weight系) クラスの見本”

番外編

• Flexbox とはなんぞや - Flexbox 理解のための実験 HTML(非 TailwindCSS)