👆

Tailwind CSS の hover、group-hover を hover メディアクエリで上書きする

2022/08/11に公開

CSS

Tailwind CSS

tech

みなさん hover 使ってますか。
ボタンにマウスカーソルを当てたときにほわっとさせたりとか色変えたりするときに使うアレです。非常に便利ですよね。

Tailwind CSS の場合、class に hover:変えたいクラス名 でホバーを指定できたり、group、group-hover を使うと親にホバーしたときに子の状態を指定できたりして便利です。

しかし、そのまま使うとスマホのタップでも反応してしまうため、 Tailwind の設定をカスタマイズして使っていました。

extend を用いたカスタマイズ

extend: {
  screens: {
    'hover-hover': { raw: '(hover: hover)' },
  },
},

これで hover-hover:クラス名 で指定できて便利！何かあったときに hover も指定できるのでこれでいいなと思っていましたが使っていくうちに色々見えてきました。

そもそもスマホ向けに hover を指定しない
group に対応できない
補完が出たり出なかったりする

なんかないかなといろいろ探していたら Tailwind のプラグインを作成するという stack overflow の解決策が見つかりました。

plugin を作成して既存のものを上書きする

参考元

上記では hover のみでしたが、 group-hover のものも上記を参考に追加できましたので共有したいと思います。

tailwind.config.js の例

const plugin = require('tailwindcss/plugin')

const hoverPlugin = plugin(({ addVariant, e, postcss }) => {
  addVariant('hover', ({ container, separator }) => {
    const hoverRule = postcss.atRule({
      name: 'media',
      params: '(hover: hover)',
    })
    hoverRule.append(container.nodes)
    container.append(hoverRule)
    hoverRule.walkRules((rule) => {
      rule.selector = `.${e(
        `hover${separator}${rule.selector.slice(1)}`
      )}:hover`
    })
  })
})

const groupHoverPlugin = plugin(({ addVariant, e, postcss }) => {
  addVariant('group-hover', ({ container, separator }) => {
    const hoverRule = postcss.atRule({
      name: 'media',
      params: '(hover: hover)',
    })
    hoverRule.append(container.nodes)
    container.append(hoverRule)
    hoverRule.walkRules((rule) => {
      rule.selector = `.group:hover .${e(
        `group-hover${separator}${rule.selector.slice(1)}`
      )}`
    })
  })
})

module.exports = {
  plugins: [
    hoverPlugin,
    groupHoverPlugin,
  ],
}

hover の例

hover:opacity-50 を指定

hoverの例

group-hover の例

group-hover:opacity-100 group-hover:scale-100 を指定

group-hoverの例

これで Tailwind CSS の hover、group-hover そのままで、スマホのときにはホバーされないようになりました。

Tailwind CSS はメディアクエリをいじれたりプラグインも作りやすかったりと拡張性も高く、自分好みにカスタマイズする楽しさもあるので非常に面白いなと思っています。

追記

3.1からオプション有効化でhoverを上のような感じにしてくれるみたいです！

extend を用いたカスタマイズ

plugin を作成して既存のものを上書きする

hover の例

group-hover の例

追記

Discussion