microCMSAPIから取得したコンテンツの一部にスタイルが適用されない問題

状況

Next.jsを使用してmicroCMSでコンテンツを管理するブログを作成。主にTailwindCSSを使用してスタイリングをしています。

こちらを参考に作成しています。詳細は割愛させていただきます。

https://blog.microcms.io/microcms-next-jamstack-blog/

export default function BlogId({ blog }) {
  return (
    <main>
      <h1>{blog.title}</h1>
      <p>{blog.publishedAt}</p>
      <div
        dangerouslySetInnerHTML={{
          __html: `${blog.body}`,
        }}
      />
    </main>
  );
}

現状このような形でdivタグ内にdangerouslySetInnerHTMLを使用して取得したコンテンツを展開しています。
マークダウン形式で入力してもmicroCMSの方で変換されて取得するコンテンツに関しても特に問題なさそうです。

問題発生・・・

しっかり表示されているしグローバルスタイルを変更すればmarginなどのスタイリングも当てられていたので満足していたのですが、フォントサイズなどの調整ができないことに気づきました。

tailwindCSSではこのようにしてグローバルスタイルを変更することができます。

// styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
   h1 {
    @apply mb-10 font-semibold text-5xl sm:text-6xl;
  }
}

mb-10(margin-bottom)は適用されているのですが、text-5xl(font-size)等が適用されていなかったのです。
記述ミスかと思ったのですが、APIから取得しているもののみ適用されていませんでした。
mbは効いているのになぜ？？？デベロッパーツールでfont-size変更しても変わらないけどなぜ？？？

原因特定

どうやらマークダウンから変換される際にstyleでフォントサイズなどが強制されている事が発覚しました。どうしたものか・・・

対策

CSSには優先順位というモノが存在します。

タイプセレクタ < class < id < style

このような感じでstyleが一番強い影響力を持っています。
このせいでstyleで指定されていまっている部分に関してはTaileindCSSではどうしようもなかったわけですね。

そこでこの優先順位を変更する為の!importantを使用します。

 h1 {
    @apply mb-10 !font-semibold !text-5xl sm:!text-6xl;
  }

tailwindではこのように!だけで!importantが適用されます。

!importantによる優先順位の変更は決まったルールから外れてしまう事を意味するので使用する際は注意が必要になってくると思いますが、今回私はこのような形でスタイルを変更することに成功しました。