Tailwind css とは？

公式のキャチコピー👇

Rapidly build modern websites without ever leaving your HTML.

「HTMLから離れずにモダンなwebサイトが作れるぞ！

2019年10月2日に adamwathan という人によってリリースされたutilityファーストのcssフレームワークです。 ここでいうutilityとは、すごく簡単に説明してしまうと、p-10 m-0 h-40 ...　といったクラスたちのことです、つまりクラス集を売りにしているフレームワークということですね。

bootstrap とは？

公式のキャチコピー👇

Build fast, responsive sites with Bootstrap

bootstrap使えばレスポンシブなwebサイトを高速で作れるぞ！

Bootstrapはtwitterがオープンソースで開発しているレスポンシブファーストのcssフレームワークです、Tailwindと違ってBootstrapはutilityクラスだけでなく、コンポーネント、タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがあります、HTMLおよびCSSベースのデザインテンプレートも用意されています。

Tailwind cssのメリット

キャチコピーの通りHTMLから離れず、一からcssを書かずにUIの構築ができる

例:

<form action="" class="max-w-sm px-3 mx-auto">
  <div class="title text-center mb-8">
    <h1 class="font-bold text-3xl">Login</h1>
  </div>
  <div class="mb-4">
    <label for="email" class="block mb-2 font-medium">Email</label>
    <input type="email" class="p-3 border rounded w-full focus:outline-none focus:ring-1 ring-blue-500" placeholder="**@**.**" name="email" id="email">
  </div>
  <div class="mb-4">
    <label for="password" class="block mb-2 font-medium">Password</label>
    <input type="password" class="p-3 border rounded w-full focus:outline-none focus:ring-1 ring-blue-500" placeholder="****" name="password" id="password">
  </div>
  <div class="mb-4">
    <input type="submit" value="Submit" class="bg-blue-500 p-3 rounded text-white w-full hover:bg-blue-600 cursor-pointer">
  </div>
</form>

このHTMLの記述だけで美しいUIのFormが作成できます。

開発中にUIの柔軟性が上がる

cssのクラス名を考える定義する時間が減り、構築したいものに集中できます。 JSフレームワークとの相性もいいと思います。Atomic designのコンセプトでいうと「パーツの最小単位からデザインしていく」にとても当てはまると思います。一回作ってしまえば、使い回しができる、もう一度同じ記述をする必要がなくなります。

デザインシステムがデフォルトで対応

tailwind cssでは独自のデザインシステムはもちろん、デフォルトの状態で既にデザインシステムが組み込まれています、なので何気なくコード書いていくと綺麗なサイトが仕上がります、（ほとんど同じ見た目になってしまいますがｗ）

bootstrap のメリット

基本のUIの構築が素早くできる

キャッチコピーの通り、直ぐにUI構築ができます、特にWebアプリなどでよく使うフォーム、モーダル、トースト、ヘッダー、フッターは既に用意されているので、ルールに従って記述するだけで構築ができます、UIではなく機能を優先で作りたい場合にはとても適していると思います。

例：

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

リソースが豊富

Bootstrap cssがリリースされたのは2011年なので、世界中での有名なサイトやたくさんのプロジェクトに使われています、それなりの情報が豊富なので、つまづいた時に解決方法が見つかりやすいと思います。

UIコンポーネント

上でも言ったようにbootstrapにはWebアプリでよく使われるコンポーネントがデフォルトで用意されています、bootstrap.jsを読み込み特定の関数を呼ぶだけでコントロールができます、この点ではUIのロジックのかかるコストを抑えられると思います。

どっち使うべき？

あくまで個人の感想ですが、プロジェクトによると思います。

jSフレームワークを用いてUIはデザインシステムに沿っているプロジェクトの場合はTailwindが適していると思います。 UIよりもバックエンドの方がメインで、管理者画面やCMSといった機能とスピード重視で開発を進みたいプロジェクトの場合はBootstrapの方適していると思います。

以上。　ではまた！😉