【Tailwindcss】hover: dark: が使える！クラスの追加方法

Tailwind 難しい

Vue で書いていますが、HTML なら同じです！

<template>
  <DashboardLayout title="テスト" class="flex flex-col gap-1">
    <div class="bg-red-500">
      色を付けたい
    </div>

    <div class="bg-accent">
      独自の色を付けたい
    </div>

    <div class="hover:bg-accent">
      ホバー時だけ、独自の色を付けたい
    </div>
  </DashboardLayout>
</template>

<style lang="scss">
.bg-accent {
  @apply bg-primary-500;
}
</style>

hover: や dark: が動かないぞ...

Tailwind 完全に理解した

hover: や dark: は utilities to style elements と言うらしい
つまり CSS で定義するのではなく Tailwind 側で登録してあげる必要がある

これには config で addUtilities() というものを使うらしい

tailwind.config.js

import plugin from 'tailwindcss/plugin'

/** @type {import('tailwindcss').Config} */
export default {
  // ...

  plugins: [
    require('tailwindcss-primeui'),

    plugin(function ({ addUtilities }) {
      addUtilities({
        '.bg-accent': {
          background: 'var(--p-primary-500)',
          '@apply dark:bg-[var(--p-primary-700)]': '',
        },
      })
    }),
  ],
}

わーい、できちゃった

ちなみに addUtilities() の中で Utility を使いたいときは、@apply を頼るしかないみたい

おわりに

@apply は非推奨だけど、色情報はまとめておいた方が良いと思う
個人的には xx-red-500 系を HTML に埋め込みたくない

Tailwind の config は複雑怪奇なので、もっと良いやり方があるかもしれない

• Plugins - Tailwind CSS
  • https://tailwindcss.com/docs/plugins
• I have a question about the structure of addUtilities plugin · tailwindlabs/tailwindcss · Discussion #13910 · GitHub
  • https://github.com/tailwindlabs/tailwindcss/discussions/13910