QuasarにTailwindを追加してよかったこと7選

Quasarのコンポーネントとクラスはプロジェクトの立ち上げ期には非常にパワフルで開発スピードもかなり乗っていたんですが、細かいデザインの修正に対応するのが大変になってきたのでTailwindを導入しました
Tailwindを導入して感じたQuasarとTailwindの併用のメリットをまとめます

ネストが浅くなる

これは自分が気にしすぎなのかもしれないですが、Quasarでレイアウトを組もうとすると

を実現するのに

<template>
  <div class="column q-col-gutter-y-lg">
    <div class="col">
      <div class="row justify-between">
        <div class="col-auto">
          <MyComponentA />
        </div>
        <div class="col-auto">
          <MyComponentB />
        </div>
      </div>
    </div>
    <div class="col">
      <MyComponentC />
    </div>
  </div>
</template>

みたいな実装をしていました
ところがTailwindを使ったら

<template>
  <div class="flex flex-col gap-y-4">
    <div class="flex justify-between">
      <MyComponentA />
      <MyComponentB />
    </div>
    <MyComponentC />
  </div>
</template>

と書けるようになりました
Quasarでは特にcolumnのなかでrowを使う場合にcol rowなどとしてしまうとgutterの余白設定がおかしくなってしまうことが多いです
QuasarのgutterがCSSのmarginを使うのに対して、TailwindのgapはCSSのgapを使うのもあり意図したデザインを浅いネストで実現できるようになったのだなと感じました

クラス付与が減る

Quasarではレイアウトが崩れやすいのでcolを欠かさずに付与していましたが、Flexのデフォルトの挙動で十分なことも多いためクラスを付与する場面が減りました

例えばこんなレイアウトを組むとき

Quasarだけだと

<template>
  <div class="row">
    <div class="col-auto">
      <QBtn icon="sym_o_chevron_left" label="先月" \>
    </div>
    <div class="col">1月</div>
    <div class="col-auto">
      <QBtn icon-right="sym_o_chevron_right" label="来月" \>
    </div>
  </div>
</template>

Tailwindも使うとgrowだけ指定で済みました

<template>
  <div class="flex">
    <QBtn icon="sym_o_chevron_left" label="先月" \>
    <div class="grow">1月</div>
    <QBtn icon-right="sym_o_chevron_right" label="来月" \>
  </div>
</template>

コンポーネントに直接付与しても動く

Quasarでは

<MyComponentA class="col" />

と書いてもうまくいかないことが多かったのが

<MyComponentA class="grow" />

と書いても動くことが増えた（気がします）
純粋なStyleの付与だからこそクラスの階層にとらわれずに済むようになったのかもしれませんね

VSCodeでIntelliSenseが効く

公式が出している拡張機能をVSCodeに入れると

• クラスの候補をサジェストしてくれて
• 意味のないクラスの付与は警告してくれて
• クラスが設定するStyleを教えてくれて

非常に開発効率が上がります

Prettierのプラグインでクラスの順番が統一できる

公式が出しているPrettierプラグインをプロジェクトに導入すると、公式が推奨するクラスの順番へと並び替えてくれます

クラスの付与の順番が自動で決まるのでコードに統一感が出て非常にうれしいのと
並び順で悩まなくて済むのはうれしいですね

ちなみにTailwind以外のクラスは自動で先頭に移動されました

Quasarの仕様を把握しなくて済む

Quasarの用意したクラスを使う場合はQuasarの想定した使い方を調べる必要がありました
Tailwindの場合は単純なStyleの付与を行うクラスがたくさんあるだけなので調べるのはCSSの仕様だけで済みます
上手くいかない時もCSSだけの問題になるので原因特定もしやすくなったと感じました

そんなにQuasarとぶつからない

今回導入にあたりTailwindのクラスをフル活用したかったので、少し危険ですがQuasarを読み込んだあとにTailwindを読み込むようにしました
全くぶつからないわけじゃないんですが、今のプロジェクトではQuasarのコンポーネントが崩れた箇所はありませんでした
Quasarのクラスを使っているところが微妙にずれたところはありましたが、結局Tailwindに載せ替えたので問題になりませんでした