HTML上でh1タグを使っても大文字の太文字にならない理由を解明した

問題

本来ならこうなって欲しいのに、

このようになっている理由を調査した。

CSSをlayouts/application.html.slim

    = stylesheet_link_tag 'application', 'data-turbo-track': 'reload'

ここで設定しているのが理由だった。

ここで、CSS設定をまっさらな状態にリセットして、なおかつTailwind CSSを使えるようにしている。

CSSファイルを何も設定していない状態だと、簡易的なCSSが当たるようになっている（リセットはされていない）。そのため、普通のHTMLファイルだとh1タグが太文字の大文字になる。

h1 Sandbox#h1test
p.bg-red-500 Find me in app/views/sandbox/h1test.html.slim

そのため、上のコードは次のスクリーンショットのようになる。

h1タグの文章が大文字の太文字になっていなくても、問題ない（リセットされているだけ）。

自分でTailwindを書いて、CSSを当ててあげて、読みやすくしていく必要がある。

つまり、リセットCSSが当たっているような状態だから、h1タグが大文字の太文字になっていなかった。