TailwindとGitHub Pagesで遊んでみた Vol.1

どもども！最近、読売ランドに行って乗り物に一切乗らず、UFOのカップ麺を作って帰ってきました、龍ちゃんです。読売ランド始めていきましたけど、なかなか広くて遊べるところがたくさんあって面白かったですね。遊園地に行くのは、何十年ぶりですが大人になっていく遊園地は、子供のころとは違った楽しみ方ができるので、あんなに楽しめるとは思っていなくていい発見をしました。

そろそろ本題に入っていこうかなと思います。今回は最近僕がはまっているCSSフレームワーク「Tailwind」で遊んでみたという体験記になっています。せっかくなので、Github Pagesを使って見れる形にしたサイトでも作ろうかと思い立ったので作りました（デザインは素人なので許してください( *´艸｀)）。

今回の遊びの結果はこちらですね。ここから下は、雑談と「Tailwind」の布教記事となっています。Git上でソースものぞけるので、興味がありましたらどうぞ。

前回の記事で少し触れましたが、僕はフロントの志向が若干あります。そのため、デザインを作ったり、アプリ作ったりいろいろやっています。入社前までは、ピュアCSSをゴリゴリ書いていたんですが、その当時公開していたサイトは、セキュリティ侵害を受けたので今はローカルに大切に保存しています（皆さんWordpress の更新はちゃんとしましょう）。

さて、入社してからですが先輩社員とのお話の中に「Tailwind」といったCSSフレームワークの話が出てきまして、なんと先輩の推しだというのです。これは勉強するしかないと思いまして！今に至るという感じですね。なので、この熱量は先輩譲りということにしておきましょう。

せっかくですので、「Tailwind」がどういったものなのか紹介しておこうかなと思います。

「Tailwind」とはUtility First（ユーティリティファースト）をコンセプトに設計されたCSSフレームワークです。何のこと言ってるかわかりませんよね？

大丈夫です！僕もよくわかっていないので。

簡単にお話しすると、「生のCSSだと書く分量増えるやろ、ちょっと成形しやすいようにまとめちゃる」ってぐらいの認識で大丈夫だと思います。生のCSSでデザインする場合だと、CSSファイルを用意したり、HTMLファイルにstyleタグを用意して書き込んだりしないといけなかったですよね。それが、「Tailwind」の記法に則ったら簡単に書けるよ！といったものですね。言葉で説明するより、見たほうが早いので比べてお見せしますね。

こちらが「Tailwind」です。

<div class="flex justify-center items-center w-36 h-12 rounded-md text-white font-bold hover:cursor-pointer hover:shadow-lg transition-transform hover:-translate-y-0.5 bg-blue-600/60 border-2 border-blue-600/40">
	Send
</div>

こちらが「生のCSS」です。

<div class="btn">
	Send
</div>

<style>
    .btn {
        display: flex;
        height: 3rem;
        width: 9rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.375rem;
        font-weight: 700;
        color: white;
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        background-color: rgb(37 99 235 / 0.6);
        border-color: rgb(37 99 235 / 0.4);
        border-width: 2px;
    }
</style>

ちなみにこのコードは、下のボタンのデザインですね。

両方のコードを見比べると違いが判りますね。第一印象としては、縦に伸びるか横に伸びるかといった違いがありますね。あまりCSSを見慣れていない方からすれば、どちらも胸が苦しくなってしまうものですね。書く分量を比べてみると、若干「Tailwind」のほうが少ないんですよね。また、二つのファイルを見比べる必要がないので、過去の自分と喧嘩する必要がないので、過去の自分とも仲良くできてしまいますね。

布教するのはこの辺にして、今日のタイトルは「Tailwindで遊んでみた」ですので遊んでいきたいと思います。今回は少し技術的なことをしますので、ちゃんと再現性があるものにするために、付録にリンクをまとめておきます。紹介する記事の一つは、僕が書いた記事なのでぜひ読んでみてください。

では、早朝に始めたTailwindコーディングの結果は「Tailwindで遊んでみた Vol.1」です。また、遊びましたら乗っけますね。

シリーズ次の記事はこちらから( *´艸｀)

付録

環境構築：Tailwind環境構築をシンプルに | SIOS Tech. Lab
GitHub Pages公開:自分で作ったWebページをインターネット上に公開しよう！
Tailwind公式:Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.

RyosukeTanaka

LOG

付録

TailwindとGitHub Pagesで遊んでみた　Vol.1