はじめに

VueTailwindを使ってみたので、ハマったことを紹介します。

ちなみに、バージョンは2.2.1です。

VueTailwindについて

VueTailwindはTailwindCSSでカスタマイズ可能なVueコンポーネント群です。コンポーネントごとにバリアントを設定して、異なるデザインを使うことができます。

導入

公式の手順通りに進めます。各コンポーネント、バリアントのクラスは、ここではTheme Builderのデフォルトの内容から変更せずに使用します。

ハマりポイント1： settingsのクラスにはTailwindCSSのプレフィックスを設定する必要がある

tailwind.config.js

module.exports = {
  prefix: 'tw-',
}

このようにプレフィックスを指定したら、VueTailwindのコンポーネントがうまく表示できませんでした。

VueTailwindのコンポーネント・バリアントのクラス定義にもプレフィックスをつける必要があったようです。

const settings = {
  TInput: {
    fixedClasses:
-      'block w-full px-3 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
+      'tw-block tw-w-full tw-px-3 tw-py-2 tw-transition tw-duration-100 tw-ease-in-out tw-border tw-rounded tw-shadow-sm focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-outline-none focus:tw-ring-opacity-50 disabled:tw-opacity-50 disabled:-tw-cursor-not-allowed',
    ...
  },
  ...
}

これで問題なく表示されるようになりました。

ハマりポイント2：「$listeners is readonly」のエラーが出た

このエラーで検索するとVueインスタンスが複数作られていることが原因のようで、VueのバージョンをVueTailwindに合わせたらこのエラーは出なくなりました。ただ、この解決方法が正しいのかどうかは私にはわかりません。

package.json

- "vue": "2.6.11",
+ "vue": "2.6.12",

ハマりポイント3: TDatePickerの日時のフォーマットはflatpickrの形式

TDatePickerの日時の表現はflutpickrのトークンを指定します。他の形式をpropに指定しても期待通りに動作しないので、別の日付ライブラリを使っている場合は注意が必要そうです。

後述の問題もあったので、私はTDatePickerをラップしたコンポーネントを作ることにしました。

ハマりポイント4: TDatePickerで日付を入力したとき、時間・分・秒の値は現在時刻の値が用いられる

dateFormatにZ（ISO形式）を指定すると、時間・分・秒の値は現在時刻の値が用いられます。

<t-date-picker
  user-format="Y/m/d"
  date-format="Z"
/>

例えば上記のコンポーネントで2021/5/21を選択した時に、2021/5/21 00:00:00とならずに2021/5/21 09:24:02のようになります。

00:00:00としたかったので、TDatePickerには表示と同じ形式で保持させ、inputイベントをラップしてISO形式を返すようにしました。

onInput(value: string) {
    if (value) {
      value = new Date(value).toISOString()
    }

    this.$emit('input', value)
}

2.2からTimePickerも使えるようになり、時刻の初期値を設定するinitialTimeが追加されました。
初期値を設定するプロパティなので当然かもしれませんが、ミリ秒は値が残ってしまいました。

<!-- 以下のようにinitialTimeを0埋めで設定しても、入力時にミリ秒は0埋めされない -->
<t-date-picker
  user-format="Y/m/d"
  date-format="Z"
  initial-time="00:00:00"
/>

VueTailwindを使ってみました