Laravel + tailwindでボタンデザインのチェックボックスを実装

現在作成しているlaravelアプリにチェックボックスを組み込んだですが、デザインをボタンぽくしたかったのでtailwindで実装してみました。

同様のことを生のCSSで書いて解説しているブログはけっこう見つかったのですが、tailwindで実装しているのは見つからなかったので、自分自身の備忘録も兼ねて完成したソースを残しておきます。

完成画面

最終的に下図のような感じで、ボタンっぽいデザインにしました。

選択済み・マウスホバー時には色が濃くなるようになってます。

完成版ソース

{{-- タグ選択 --}}

@if ($tags)

　<div class="p-2">

　　<p for="career" class="leading-7 text-sm text-gray-600">特徴タグ</p>

　　@foreach ($tags as $tag)

　　　<div class="relative inline-block px-1 py-2">

　　　　　{{-- 既に登録しているタグがあれば --}}

　　　@if ($jobTags && $jobTags->contains($tag))

　　　　　<input checked="checked" type="checkbox"　id="checkbox{{ $tag->id }}"

　　　　　　　　　name="tag[{{ $tag->id }}]"　value="{{ $tag->id }}"

　　　　　　　class="opacity-0 absolute w-full h-full left-0 peer cursor-pointer">

　　　　　<label for="checkbox1"　class="text-white rounded-full bg-teal-500

　　　　　　　　　cursor-pointer　ease-in peer-hover:bg-teal-600 px-2 py-1

　　　　　　　　　peer-checked:bg-teal-600">

　　　　　　　　　{{ $tag->tag_name }}

　　　　　</label>

　　　　{{-- タグ未登録であれば --}}

　　　@else

　　　　　<input type="checkbox" id="checkbox{{ $tag->id }}"　name="tag[{{ $tag->id }}]"

　　　　　　　value="{{ $tag->id }}"　class="opacity-0 absolute w-full h-full left-0 peer

　　　　　　　　　cursor-pointer">

　　　　　<label for="checkbox1"　class="text-white rounded-full bg-teal-500

　　　　　　　　　cursor-pointer　ease-in peer-hover:bg-teal-600 px-2 py-1

　　　　　　　　　peer-checked:bg-teal-600">

　　　　　　　　{{ $tag->tag_name }}

　　　　　</label>

　　@endif

　　</div>

　@endforeach

　</div>

@endif

* アプリでは求人サイトを作成していて、登録した求人(job)がタグ(tag)を選択できる仕様です。

上記はタグを選択できるようにチェックボックスを実装している画面のソースコードです。

コメントにあるように、既にタグ登録済みかどうかで条件分岐してます。

checkboxをボタンデザインで表現する為のクラスをtailwindで書く

tailwind初めて使ったのでCSSをtailwindではどう書くのか調べながら実装しました。

(CSS記法　→　tailwind記法　//解説)

opacity: 0;　　　　→　opacity-0　//要素を透明にする

position: absolute;　　　→　absolute  //絶対配置

left: 0;　→　left-0  //絶対配置で左づけ

cursor: pointer;　→　cursor-pointer  //マウスカーソルの種類

border-radius: 9999px;　→　rounded-full  //角を丸く

マウスホバー時・チェック時に色を変える

peerを使って兄弟要素のスタイリングを制御できます。

・兄要素に peer

・弟要素に peer-* 接頭辞クラスを使用する

ことで可能になります。

なので、上記の例でいうと

・兄要素のinputタグに peer

・弟要素のlabel に peer-checked:bg-teal-600 を記述して、

兄要素のinputがcheckedかどうかで弟要素のlabelの色が変わるようになってます。

この辺りは下記記事や公式サイトを参考にしました。

Tailwind CSSで親要素や兄弟要素の状態変化を簡単にスタイリングする ++ Gaji-Laboブログ

Handling Hover, Focus, and Other States - Tailwind CSS

他にも書き方あると思うので、もっといい書き方知っている方は教えてください。