タグっぽいUI（バッジ）の作り方【Tailwind CSS編】

やりたいこと

タグを「バッジ」風に見せたい。

ゴール

タグの中身は適当です。タイトルと合ってない。笑

方法

1. 使用するTailwindクラス

目的	class
背景色	bg-blue-100
テキスト色	text-gray-700
角丸	rounded-full
内側余白	px-3 py-1
文字サイズ	text-xs

2. 基本のHTML構造（Blade例）

@foreach ($tags as $tag)
    <span class="px-3 py-1 bg-blue-100 text-gray-700 rounded-full text-xs">
        {{ $tag->name }}
    </span>
@endforeach

3. タグをグループごとに分類して見せる場合（例：フロント・バックエンドなど）

@foreach ($typeLabels as $type => $label)
    @if (!empty($groupedTags[$type]))
        <div class="flex flex-wrap items-center gap-2">
            <span class="font-semibold">{{ $label }}：</span>
            @foreach ($groupedTags[$type] as $tag)
                <span class="px-3 py-1 bg-blue-100 text-gray-700 rounded-full text-xs">
                    {{ $tag->name }}
                </span>
            @endforeach
        </div>
    @endif
@endforeach

補足ポイント

・flex flex-wrap gap-2 でタグが横並びで折り返し可能になる
・items-center を使うとラベルとバッジの縦位置が揃って美しい
・色は bg-gray-100, bg-green-100, text-indigo-700 などお好みで
・ラベル部分だけ太字にするとセクションとしての見出し感が出る