0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【教えて欲しい】tailwind css / applyは使いすぎたら問題ある?

Last updated at Posted at 2022-12-09

うちの開発チーム内、
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がクソほど大量にある状態で、、、
これは大丈夫なんかな〜と少し心配になってる次第でございます。

知見がある方、それやばいよ!の場合は、
コメントでデメリット教えてもらえると嬉しいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?