うちの開発チーム内、
tailwindの運用方法で一騒動ありまして。
@apply使ってるけどちょっと心配になってる。
ことの始まりは、WEBシステムの大規模リファクタリングに対して、
フロント側は何使っていこか?ってことから始まった。
vue3は採用するとして、それならtailwind使いたいプログラマと
htmlの可読性が落ちるのが生理的に無理なワイとがバトルした。
(そのほかも色々)
結果、既存のclass命名規則を残しつつ、
そのclassに@applyを使用してtailwindをぶっ放していくことで、
ひとまず落ち着いた。
例えばこんな感じ
vue tamplate
<div class="card">
<div class="card_name">カードの名前</div>
<div class="card_main">カードのなかみ</div>
</div>
vue / style
.card { @apply bg-white shadow rounded;
.card_name { @apply text-lg font-bold mb-5;}
.card_main { @apply flex flex-col gap-3;}
}
しばらく運用してるんやけど、なかなかよい。
いちいち@applyは書かないといけないデメリットはあるけど、
記述スピードはめっちゃ上がったと思う。
プログラマは直接タグにtailwindcss打ち込んでくる、
それはワイがstyle内にapplyで移す。
みたいなカタチの運用方法。
ただ、styleの中に@appryがクソほど大量にある状態で、、、
これは大丈夫なんかな〜と少し心配になってる次第でございます。
知見がある方、それやばいよ!の場合は、
コメントでデメリット教えてもらえると嬉しいです。