便利なページレイアウトを使用して

あなたがここにいるならば、あなたはおそらくTailwind CSSであるCSS有用性に慣れています.既定のTarwind基本クラスを使用すると、いくつかの非常に良いページレイアウトをすぐにノックアウトできます.
私はbootstrapを使用してレイアウトのoodlesをやったし、私はTarwindについての詳細を学びたいので、私はいくつかの手の練習が役に立つと思いました.これらの例は、レイアウトを応答します.
Flexbox classes
サイドバーによる2列レイアウト

ここでは、Tarwindとの超基本的な2列のページレイアウトです.これは、左側にサイドバー、右側にスクロール可能なメインコンテンツ領域があります.また、高さにかかわらず底に付着するフッターもあります.私はサイドバーでNavメニューを配置したかったので、ページが垂直にスクロールされるとき、それは常に左側に見えるようにサイドバー粘着性を作りました.レイアウト全体にはcontainer mx-auto

<div class="container mx-auto">
    <div class="flex flex-row flex-wrap py-4">
        <aside class="w-full sm:w-1/3 md:w-1/4 px-2">
            <div class="sticky top-0 p-4 w-full">
                <!-- navigation -->
                <ul class="flex flex-col overflow-hidden">
                    ...
                </ul>
            </div>
        </aside>
        <main role="main" class="w-full sm:w-2/3 md:w-3/4 pt-1 px-2">
            <!-- content area -->
        </main>
    </div>
</div>
<footer class="mt-auto">
    ...
</footer>

Demo
聖杯レイアウト

おそらくドットコム時代のウェブデザイナーのための最も有名なレイアウトは、ここでは、3列“Tailwindの実装”です.レイアウトは、小さなモバイル画面上で垂直方向のレイアウトスタックを応答します.この固定された角の流体安置レイアウトは、多くの内容を持っているページのためによく働きます!

<div class="w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 flex-grow">
    <!-- fixed-width -->
    <div class="w-fixed w-full flex-shrink flex-grow-0 px-4">
        <div class="sticky top-0 p-4 w-full h-full">
            <!-- nav goes here -->
        </div>
    </div>
    <main role="main" class="w-full flex-grow pt-1 px-3">
        <!-- fluid-width: main content goes here -->
    </main>
    <div class="w-fixed w-full flex-shrink flex-grow-0 px-2">
        <!-- fixed-width -->
        <div class="flex sm:flex-col px-2">
            <!-- sidebar goes here -->
        </div>
    </div>
</div>
<footer class="bg-black mt-auto">
    ...
</footer>

このレイアウトは、サイドコラムの幅を固定するために少し余分なCSSを必要とします.

@media (min-width: 640px) {
    .w-fixed {
        flex: 0 1 230px;
        min-width: 230px;
    }
}

固定幅は、モバイルデバイス上で垂直にレイアウトスタックができるように、640pxのTailwindの小さなブレークポイントの上でのみ適用されます.
Holy Grail
Demo
フルスクリーンの背景画像

これは、ランディングページの完全に動作する非常に人気のフルスクリーンの背景画像のレイアウトです.簡単にサインアップしたり、アクションカードにコールするには、中央オーバーレイコンテンツを変更することができます.
このレイアウトは、中心部のコンテンツエリアがモバイル上のフル幅、小さなデバイス上の50 %の幅と大きなデバイス上の33 %の幅になるように対応しています.

<div class="w-full p-4">
    <main role="main" class="w-full flex flex-col h-screen content-center justify-center">
        <div class="w-full sm:w-1/2 lg:w-1/3 bg-gray-50 rounded-xl m-auto">
            <div class="bg-white rounded shadow px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <!-- centered card -->
            </div>
        </div>
    </main>
</div>

Demo
サイドバーとフルスクリーンのアプリのレイアウト

この単一のページ“アプリ”スタイルのレイアウトはサイドバー、主なコンテンツエリア、フッターを備えています.このフルハイトのレイアウトはビューポートの高さ以上にはなりません.コンテンツエリアは、必要に応じて独立してスクロールする.この例では、Tailwind CSSユーティリティフレームワークを使用しています.デフォルトクラスの一部として、Tailwindはこのレイアウト実装を簡単にするFlexboxクラスを含みます!
さらに、このレイアウトは応答する.画面幅が640 px(最小のテールウィンドブレークポイント)まで低下するにつれて、レイアウトは垂直にスタックします.サイドバーの向きを垂直方向から水平方向に(フレックスコールSM:フレックス行)反転され、主なコンテンツエリアフッターの上に残りの高さを記入します.

<div class="w-full flex flex-col sm:flex-row flex-grow overflow-hidden">
    <div class="sm:w-1/3 md:1/4 w-full flex-shrink flex-grow-0 p-4">
        <div class="sticky top-0 p-4 w-full">
            <ul class="flex sm:flex-col overflow-hidden content-center justify-between">
                 <!-- nav goes here -->
            </ul>
        </div>
    </div>
    <main role="main" class="w-full h-full flex-grow p-3 overflow-auto">
         <!-- content area -->
    </main>
</div>
<footer class="mt-auto">
    ...
</footer>

重要!あなたがTailwindを使うつもりであるならば、あなたが必要とするパーツを選ぶことができるように、Demoを覚えていてください.これらの例で参照されるテールウインドCSSは、CDNとwhopping😲!
読書のおかげで、私はあなたの次のTailwindプロジェクトKickStartにこれらの例を使用できるように願っています!it's best to make it part of the JS build process