bg-pink-500 checked:bg-yellow-500 shadow-md shadow-inner

Safari ではいずれも反映されない、Chrome,Firefox でも反映されるのはドロップシャドウのみ。

size-3.5 size-7 size-14 size-28

h-3.5 w-3.5 h-7 w-7 h-14 w-14 h-28 w-28

size-3.5

size-7

size-14

size-28

HTML の実装と解説(size-7 版で解説)

タグ構造編

<div>
	<label>
		<input type="checkbox">
		<span>
			<!-- チェックマーク SVG -->
			<svg>
				<path></path>
			</svg>
		</span>
	</label>
	<label>テキストラベル</label>
</div>
					

構造 + スタイル編

<!-- size: 7 -->
<div class="inline-flex items-center"> <!-- チェックボックスとチェックマーク SVG とラベルを縦方向センタリングで合わせる為の
										inline-flex + items-center 指定 -->
	
	<!-- この label タグはチェックマーク SVG 用のタグ。-->
	<label for="appearance-none-size-7" 
	class="flex	items-center cursor-pointer relative
	">
	<!--
		flex: flexbox にする
		items-center: 縦方向揃えはセンタリングにする
		relative: の label タグを相対座標起点にする。
	-->

	<!-- チェックボックス本体 -->
	<input type="checkbox"
		name="size-test"
		value="size-7"
		id="appearance-none-size-7"
		checked
		class="
		peer
		appearance-none
		size-7
		cursor-pointer
		rounded
		border
		border-solid
		border-gray-400
		shadow-inner
		checked:bg-blue-600
	">
	<!-- カスタムチェックボックスとしての挙動に関係のあるスタイルについてのみ解説
		peer: チェックマーク SVG 側が peer-checked で opacity(不透明度)をコントロールするためのマーク的スタイル
		appearance-none: デフォルトのチェックボックス描画を無効化。
		checked:bg-blue-600: チェック時の背景カラーを指定
	-->

	<!-- チェックマーク SVG を納めるための span タグ -->
	<span class="absolute text-white opacity-0 peer-checked:opacity-100 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none">
		<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-width="1">
			<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
		</svg>
	</span>
	<!-- span タグに設定されたスタイルの解説
		absolute: 親ブロックの領域を広げない + 先に relative 指定した label タグに対して座標指定する宣言
					（この label タグは中身にテキストを持たないので実質的にチェックボックスと同じ位置・サイズになる。ハック？）
		opacity-0: デフォルト状態ではチェックマークの不透明度 0 == 透明状態
		peer-checked:opacity-100: peer のチェックマークがチェックされたら不透明度100 == 表示
		top-1/2:
		left-1/2:
		transform:
		-translate-x-1/2:
		-translate-y-1/2:
			→ SVG のサイズがチェックボックスより大きかったとしても、チェックボックスに対してセンタリングするための座標調整、と思われる。

	-->
	</label>

	<!-- チェックボックスのテキストラベル用の label タグ-->
	<label for="appearance-none-size-7"
	class="cursor-pointer ml-2 text-slate-600 text-sm">size-7</label>
</div>