Vite + Tailwind 環境で発生する「@apply should not be used with the ‘group’ utility」エラーの解決方法
エラーの発生状況
Vite + PostCSS + Tailwind CSS 環境で開発中、以下のようなエラーが表示される場合があります。
“`
[vite] Internal server error: [postcss]
@apply should not be used with the ‘group’ utility
“`
結局このエラーは「@apply に group を書いたのが原因」ってこと？
このエラーは、CSS ファイル内で `@apply group` または `@apply group-hover:〜` のように「状態管理クラス」を適用しようとしたときに発生します。
そうそう！`group` は @apply 不可で、HTML に直接書く必要があるんだ。
原因：@apply の制約
Tailwind CSS では `@apply` に使えるのは「純粋なユーティリティクラス」のみです。
状態管理クラス（`group`, `peer`, `dark`, `hover`, `focus` など）は PostCSS が展開できないため、`@apply` に書くとエラーになります。
つまり、hover とか dark も @apply では使えないってことね？
解決策 1：group を HTML 側に移動
`group` クラスは「親要素」に付与するものなので、CSS に書かず HTML に直接指定します。
修正前（エラー発生）:
“`css
.btn-solid {
@apply w-full group relative inline-flex h-12 items-center justify-center;
}
“`
修正後（OK）:
“`css
.btn-solid {
@apply w-full relative inline-flex h-12 items-center justify-center;
}
“`
HTML:
“`vue
“`
なるほど！group は親要素に付けるルールだな。
解決策 2：group-hover を直接クラス指定
`group-hover` などの状態系クラスも `@apply` では使えません。
NG:
“`css
.btn-solid {
@apply group-hover:bg-blue-500;
}
“`
OK:
“`vue
“`
あー！状態クラスは HTML に書くって覚えればよさそう。
解決策 3：peer や dark も同様
`peer` や `dark` なども同様に `@apply` では利用できません。
例えば `dark:bg-gray-900` を使いたい場合は CSS ではなく HTML 側に記述します。
まとめると「@apply は純粋なユーティリティ専用」ってことだな！
まとめ
今回のエラーは Tailwind CSS の `@apply` に `group` などの状態制御クラスを書いたことが原因です。
解決方法は以下のとおりです：
- `group` は親要素に直接付与する
- `group-hover` など状態系クラスは HTML に直接書く
- `peer`, `dark`, `hover` なども @apply では使用不可
これを意識すれば、同様のエラーは回避できます。
本日の学びポイント！「@apply はシンプルに、状態クラスは HTML へ」だな。
コメント