tailwindcss-test-with-cli

手動作成インデックス

目次:

• 仕組み系
• 基本関係
• ページレイアウト・フレーミング関連
  • サンプル HTML 系
    • ページレイアウト系
    • コンポーネント系
    • form 系
    • その他・一般
  • TailwindCSS の各クラスの挙動調査系
• 番外編

仕組み系

• 本当の継承に近い CSS の継承のやり方
• メイン CSS ファイルの分割方法

基本関係

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

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

サンプル HTML 系

ページレイアウト系

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

コンポーネント系

• よくありそうなログインコンポーネント
• “簡単な nav-bar の実装”
• 見出し付きのブロック（デバッグ用とかの簡単な表示の奴）

form 系

• “input type="text" 系インプットフィールドサンプル”
• “button - Bootstrap ライクなボタンサンプル”
• “チェックボックスのサンプル”
• “ラジオボタンのサンプル”
• “プルダウンメニュー(select)”

その他・一般

• “dialog タグと details タグはフォールディング出来る”
• “relative と absolute について”

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

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

番外編

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