Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <div> <div class="text-xs font-bold uppercase tracking-wider text-slate-600">{{ eyebrow }}</div> <div class="leading-snug font-bold text-slate-700"> <a :href="url" class="hover:underline">{{ title }}</
![Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化](https://cdn-ak-scissors.b.st-hatena.com/image/square/76156a9040e5f40a13185215faae40c7c35b4121/height=288;version=1;width=512/https%3A%2F%2Fyuheiy.com%2F_astro%2Fapple-touch-icon.xHX4TCSa.png)