解説とかソースとか

本当はタイトルブロックの横幅は max-w-[90%] とかにしたいが [] によるカスタマイズでは % 指定出来無い。代わりに tailwind.config.js で設定する必要があるため（汎用性がなくなるので）諦めた。

→ “Max-Width - Tailwind CSS”

HTML

<div class="titled-block">
	<div class="titled-block-title">タイトルとか</div>
	<div>
		<p>コンテンツ</p>
		<p>コンテンツ</p>
		<p>コンテンツ</p>
	</div>	
</div>
	

TailwindCSS

@layer components {
	.titled-block {
		@apply
			relative
			border
			rounded-md
			mt-8
			pt-6
			;
	}

	.titled-block-title {
		@apply
			absolute
			-top-4
			left-6
			border
			border-gray-400
			rounded
			bg-white
			py-1
			px-2
			whitespace-nowrap
			overflow-hidden
			truncate
			max-w-full
			;
	}
}