【Vue】tailwindcssで再利用性の高める方法

2021年5月17日Vue.js

Vueでtailwindcssで再利用性の高める方法を紹介します。

tailwindcssのコード例

カードとタグをtailwindcssで作成すると次のようにたくさんのクラスを指定する必要があります。

<div class="bg-gray-100 rounded overflow-hidden shadow-md relative">
  <img src="images/0-01.jpg" alt="" class="w-full h-32 sm:h-48 object-cover">
  <div class="m-4">
    <span class="font-bold">タイトル</span>
    <span class="block text-gray-500 text-sm">サブテキスト</span>
  </div>
  <div class="bg-secondary-100 text-secondary-200 text-xs font-bold rounded-full p-2 absolute top-0 ml-2 mt-2">
    <span>タグ</span>
  </div>
</div>

これを他のページでも使いたい場合、同じクラスなのであれば、まとめて再利用性を高める方法があります。

@applyを使って再利用性を高める

assetsフォルダにcssフォルダを作成し、その中にstyle.cssファイルを作成しているものとします。
そこに次のように@applyを使ってまとめたいクラスをまとめてカット＆ペーストします。

@tailwind base;
@tailwind components;
@tailwind utilities;

.card {
  @apply bg-gray-100 rounded overflow-hidden shadow-xl relative;
}

.badge {
  @apply bg-secondary-100 text-secondary-200 text-xs font-bold rounded-full p-2 absolute top-0 ml-2 mt-2;
}

そして、名付けた名前(上の場合だとcardとbadge)を代わりに指定します。

<div class="card">
  <img src="images/0-01.jpg" alt="" class="w-full h-32 sm:h-48 object-cover">
  <div class="m-4">
    <span class="font-bold">タイトル</span>
    <span class="block text-gray-500 text-sm">サブテキスト</span>
  </div>
  <div class="badge">
    <span>タグ</span>
  </div>
</div>

スタイルのファイルを変更しているので、再度ビルドする必要があります。