前の記事で書いたサイト作成で、Tailwind CSSを使ってみて、かなり良いなーと思ったので紹介

Tailwind CSSとは

Tailwind は CSS フレームワークです。

既存のBootstrapやMaterialize CSSなどフレームワークと比較して非常にシンプルな作りになっています。 UIコンポーネント自体は提供せずに、必要なCSSをひたすら簡単に書けるようにしてくれているような設計になっています。

以下で、UI作成のコードの例を紹介していきます。

実装

ボタンを作成する

https://play.tailwindcss.com/BRwjHT8xIO

f:id:wheatandcat:20210127204809p:plain

コード

<div class="w-full h-full p-20 flex justify-center items-center">
  <button class="bg-blue-500 rounded-xl text-white py-1 px-4 h-10 w-28">ボタン</button>
</div>

ボタンをホバーすると色を変えるようにする

上記のコードに「hover:bg-blue-700」を追加するとホバーすると色を変えることができます

https://play.tailwindcss.com/v66jKQhCZw

f:id:wheatandcat:20210127205331p:plain

コード

<div class="w-full h-full p-20 flex justify-center items-center">
  <button class="bg-blue-500 hover:bg-blue-700 rounded-xl text-white py-1 px-4 h-10 w-28">ボタン</button>
</div>

フォームを作成する

https://play.tailwindcss.com/SpKF0BrCiE

f:id:wheatandcat:20210127211118p:plain

コード

<div class="w-full h-full p-20 flex justify-center items-center">
  <div class="w-72 h-64 box-border border-green-600 border rounded">
    <div class="bg-green-600 text-white text-center py-3 font-bold text-xl">ログイン</div>
    <div class="px-6 py-6">
      <div>
        <input class="border border-blue-400 appearance-none rounded p-1 focus focus:border-blue-600 focus:outline-none active:outline-none active:border-blue-600 mb-2" id="text" type="text" placeholder="メールアドレス" />
      </div>
      <div>
        <input class="border border-blue-400 appearance-none rounded p-1 focus focus:border-blue-600 focus:outline-none active:outline-none active:border-blue-600 mb-2" id="text" type="password" placeholder="パスワード" />
      </div>
      <div>
        <input id="one" type="checkbox" defaultChecked="{false}" class="mt-1" />
        <label htmlFor="one" class="pl-2">規約に同意する</label>
      </div>

      <div class="py-4">
        <button class="bg-blue-500 hover:bg-blue-700 rounded text-white py-1 px-4 h-10 font-bold">ログイン</button>
      </div>
    </div>
  </div>
</div>

カードを作ってみる

https://play.tailwindcss.com/6k8GPHCl8X

f:id:wheatandcat:20210127214245p:plain

コード

<div class="w-full h-full p-20 flex justify-center items-center">
  <div class="w-72 h-42 box-border border-gray-400 border-2 hover:shadow-lg rounded-md p-2">
    <div class="flex">
      <img src="https://placehold.jp/80x80.png" class="rounded-full mr-8" />
      <div class="flex flex-col justify-center">
        <div class="text-base">商品A</div>
        <div class="text-xs pt-2 text-gray-500">id: 123456789</div>
        <div class="text-xs text-gray-500">作成日: 1970/01/01</div>
      </div>
    </div>
    <div class="text-3xl font-bold text-center py-7 text-gray-700">¥ 10,000</div>
  </div>
</div>

カードをレスポンシブ対応する

スマホサイズの場合は情報を縦並びにして、PCは横並びにする（上記と同じ）

上記のコードに「flex-col md:flex-row」を追加することで、スマホのときは縦な並び、それ以上は横並びになるように変更できます

https://play.tailwindcss.com/mky4UScox2

■スマホでの表示

f:id:wheatandcat:20210127214925p:plain:w500

■PCでの表示 f:id:wheatandcat:20210127214941p:plain

コード

<div class="w-full h-full p-20 flex justify-center items-center">
  <div class="box-border border-gray-400 border-2 hover:shadow-lg rounded-md pl-2 pr-4 py-3">
    <div class="flex flex-col md:flex-row md:justify-center">
      <img src="https://placehold.jp/80x80.png" class="rounded-full md:mr-8" />
      <div class="flex flex-col justify-center text-center md:text-left">
        <div class="text-base pt-2 md:pt-0">商品A</div>
        <div class="text-xs pt-2 text-gray-500">id: 123456789</div>
        <div class="text-xs text-gray-500">作成日: 1970/01/01</div>
      </div>
    </div>
    <div class="text-3xl font-bold text-center py-3 text-gray-700">¥ 10,000</div>
  </div>
</div>

まとめ

上記のように少ないコードで細かくチューニングができて、とても好感触だったので記事にしました。今後もガンガン使っていこうと思います

wheatandcatの開発ブログ

技術系記事を投稿してます

Tailwind CSSの紹介