スマホでのタップ時に四角い枠を表示させないようTailwind CSSで設定する方法 #Android

こちらのブラウザゲームを作成する中でのことです。
ゴロゴロ円周率
操作感を向上させるため、ボタンがタップに反応する領域を、ボタンの視覚的な領域よりも広くしました。
その結果悩まされたのが、タップ時に表示される、四角い影です。

CSSであれば、以下のように書けば、この影が消えます（一般化のため、aタグにしてあります）。

a {
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

しかし、Tailwindではこれに対応するクラスが存在しません。
対応策としては、tailwind.config.jsに、以下のように記述してください。

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.no-tap-highlighting': {
          '-webkit-tap-highlight-color': 'rgba(0,0,0,0)',
        }
      })
    })
  ]
}

これで、no-tap-highlightingというクラスを使用すれば、タップ時に四角い影が表示されなくなります。

参考