Zenn
Closed2

TailwindCSSをやってみよう

MMMMMM

Tailwind cssをやってみようと思ったきっかけ

CSSのアーキテクチャとかわかっておらず、とりあえずなんでもいいから触れるべきだなと思ってやってみることにした。

Tailwindのいいといわれているところ

HTMLから離れずにCSSを書けるのがいいらしい。といってもよくわからないので公式のサンプルを見てみる。

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

公式のページにいくと動いているやつをそのまま抜粋。
パッと見た感じは、基本的にhtmlの要素にclassを追加しているだけっぽい。
bootstrapとかはどちらかというと作成されているコンポーネントだったりを記載することで構築をするが、そうではなくhtml自体は崩さず、classベースでカスタムするという雰囲気。
（個人的にはこれだけで結構引かれるところはある。bootstrapとかの元のコンポーネントを崩さなくてはならない時が面倒な印象があるので。）
ただ書いていないのでなんとも言えないが、classがやたら増えそうな気もしていて、そこはネガティブなことかなという印象ではある。

MMMMMM

一例

<h1 class="text-4xl text-green-700 text-center font-semibold">Hello tailwind</h1>

スクリーンショット
単純に文字サイズを大きく、緑色で中央にセミボールドで表示させるためにclassを付与。
見ればわかるが、classの表記が多い気がする。
一旦CDNを使って普通のhtmlで記載しているが、pugを使ったときなどtemplateがえぐいことになりそうな気がした。
また、単純にclassで自分の欲しいものが何になるかも知る必要がありそうなので、学習コストもそれなりにありそうかなと思った。

このスクラップは2023/08/16にクローズされました