tailwindcssのcontainer/ invisible/hidden/iconsについて

container

tailwindcss.com

• 上下固定でメイン部分がスクロールするサンプル

<header class="sticky top-0 bg-blue-300">
　header
</header>
<main class="container bg-indigo-200 h-screen mx-auto px-4 overflow-scroll">
　メイン部分
</main>
<footer class="fixed bottom-0 w-full bg-green-300 text-center text-white">footer</footer>

invisible

• 要素の可視性を制御するためのユーティリティ。

    <div class="mb-8 flex justify-around">
        <div class="flex-grow border-2 border-blue-300">テスト１</div>
        <div class="flex-grow border-2 invisible border-blue-300">テスト２</div>
        <div class="flex-grow border-2 border-blue-300">テスト３</div>
    </div>

tailwindcss.com

hidden

• 表示する要素を設定するには、hiddenを使用します

    <div class="mb-8 flex justify-around">
        <div class="flex-grow border-2 border-red-800">テスト１</div>
        <div class="flex-grow border-2 hidden border-red-800">テスト２</div>
        <div class="flex-grow border-2 border-red-800">テスト３</div>
    </div>

tailwindcss.com

• 上の結果がinvisibleで下の結果がhiddenになっている

icons

• TailwindCSSの作成者が作成したSVG icon

heroicons.com

• アイコンを利用する際のサンプル。

• fill-currentを使用して、SVGの塗りつぶし色を現在のテキストの色に設定します。 tailwindcss.com

• stroke-currentを使用して、SVGのストロークの色を現在のテキストの色に設定します。 tailwindcss.com

    <div class="mb-8 flex justify-around">
        <div class="flex-grow">
            <svg class="w-20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            </svg>
        </div>
        <div class="flex-grow">
            <svg class="w-20 fill-current text-yellow-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            </svg>
        </div>
        <div class="flex-grow">
            <svg class="w-20 stroke-current text-yellow-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            </svg>
        </div>
    </div>

• 上記のサンプルの実行結果