honoxでハイドレーションされたhonox-islandsタグにtailwindを適用する方法

概要

タイトルにある通り、honoxではislandsディレクトリに入れたコンポーネントは最終的に<honox-islands>にハイドレートされる。

こういう感じ
ここはビルドされるときに生成されるラッパー要素なのでこちらからスタイルを改変することが難しい。この状態だとflex-1とかが指定できない。
これを解決する、ただしtailwindを使用する。

解決法

解決法は親要素にこのtailwindのクラスを適用するだけ

[&>honox-island]:flex-1

今回追加した[&>honox-island]:flex-1という Tailwindの記法は、「自分の直下にあるhonox-islandタグに対して flex-1を適用する」というものである。
具体的に言うとこんな感じ

export default function Wrapper() {
    return (
		<div className="w-full [&>honox-island]:flex-1">
			<Counter />
			<div> ... </div>
		</div>
    );
}

Counterはislandsに入っている想定。
これでCounterのみにflex-1が適用される。