Tailwind CSS適用時にh1タグなどが適用されなくなる件について

Tailwind CSSでh1やh2にスタイルを適用する方法

使用開発環境

• Vite 5.0.0
• React 18.2.0
• Tailwind CSS 3.2.1
• @tailwindcss/forms 0.5.3
• @inertiajs/react 1.0.0
• laravel-vite-plugin 1.0.0

※React環境でやってますが他の環境でもできることは確認済みです。

問題

• デフォルトのTailwindはpreflightという初期リセットCSSを自動で適用する。
• そのせいで、h1やh2のデフォルトスタイル（太字、大きさなど）がリセットされてしまう。

解決方法

1. tailwind.config.js に以下を追加

tailwind.config.js

export default {
  corePlugins: {
    preflight: false, // Preflightを無効化する
  },
}

2. その後、ビルドする

npm run build

またはリアルタイム監視なら

npm run watch

3. これで h1, h2 タグなどにブラウザ標準のスタイルがそのまま適用される！