TailwindCSSとは？

TailwindCSSは公式ページでは、以下のように書かれています。

Tailwind CSSは高度にカスタマイズ可能な低レベルのCSSフレームワークであり、オーバーライドするために戦わなければならない煩わしい独善的なスタイルなしに、オーダーメイドのデザインを構築するために必要なすべてのビルディングブロックを提供します。

TailwindCSSを使うことで、レスポンシブの対応や、細かなカスタマイズなどが簡単に行うことができます。

TailwindCSSのコンポーネントをつかって、サイトを簡単に作る

TailwindCSSには、さまざまなサンプルコンポーネントがあり、それをコピペすることで、簡単にWebサイトを作成することができます。
おすすめのサイトを3つご紹介します!

コンポーネントを組み合わせてフロントページを作成する

先ほどまで、TailwindCSSのコンポーネントのサンプルコードが乗っているサイトを紹介しました。これらのサイトに乗っているコードを組み合わせて、フロントページを作成します。

例えば、ナビバーを作成する場合は、以下のコードをコピペしてカスタマイズします。

Navbar.vue


   <nav class="bg-white shadow dark:bg-gray-800">
        <div class="container px-6 py-3 mx-auto md:flex">
            <div class="flex items-center justify-between">
                <div>
                    <a class="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                </div>
                
                <!-- Mobile menu button -->
                <div class="flex md:hidden">
                    <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                        <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                            <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
            <div class="w-full md:flex md:items-center md:justify-between">
                <div class="flex flex-col px-2 py-3 -mx-4 md:flex-row md:mx-0 md:py-0">
                    <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
                    <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
                    <a href="#" class="px-2 py-1 text-sm font-medium text-gray-700 transition-colors duration-200 transform rounded dark:text-gray-200 hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
                </div>
                
                <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                        <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                            <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>

                    <input type="text" class="w-full py-2 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-blue-300" placeholder="Search">
                </div>
            </div>
        </div>
    </nav>

コードをコピペするだけで、このようなヘッダーが作成されます。

そのほかのパーツも同様にコピペすると、短時間でMVPを作成することが可能です。

最後に

今回はTailwindCSSを使ってフロント部分を構築しました。

弊社では、一緒に働いてくれるエンジニアを募集しています。
↓最新技術や自社開発に興味のある方はこちらから↓
Wantedly - スタジオアンビルト株式会社

こんなWebサービスを作っています。
・マドリー
・Studio Unbuilt