【本番環境】ログイン画面のバリデーションエラーメッセージに mb-2 を効かせたい【Laravel】

やりたいこと

ログイン画面でバリデーションエラーになった際、
エラーメッセージである「ログイン情報が登録されていません。」に、
「mb-2」を効かせたい。

開発環境では効くが、
本番環境になると効かなかった。

・修正前

・修正後

原因？

PurgeCSS（Tailwind CSS の content 設定）によって、
class = "mb-2" が削除されてしまうケースがある。

なぜ起こるのか？

Tailwind（v2以降〜）では、未使用のCSSクラスを削除（purge）して軽量化する仕様がある。
これは tailwind.config.js の content オプションで定義されたファイル群の中で「明示的に使われていないクラス」はビルド時に削除されるためです。

発生しやすいパターン例

以下のようなクラスは PurgeCSS に**「使ってない」と誤認識されて削除されることがあります：

<ul class="text-sm text-red-600 {{ $hasError ? 'mb-2' : '' }}">

このようにクラス名が 動的に決まる場合、
Tailwind は mb-2 という文字列が content に検出されないため、
「使ってない」と判断して削除します。

対策方法：safelist に追加

tailwind.config.js に safelist: ['mb-2'] を書いて明示的に残す

① tailwind.config.js の safelist 設定例

tailwind.config.js

module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  safelist: [
    'mb-2', // ← これで削除されなくなる！
  ],
}

②本番 CSS を再ビルド

npm run build

③エックスサーバーなら

↓ 13番を行う

✅ 補足：デプロイ環境のみで起こる理由

ローカル（開発環境）では PurgeCSS が効いてないため、mb-2 は表示される。
本番ビルドでは npm run build や vite build 時に purge が走るため、削除されて消えるという流れです。