📚

gatsbyとtailwindcssでclassNameが再レンダリングされない

2020/12/27に公開

状況

loadingが終了した後に表示されるdivタグにloading時のdivタグのclassNameが残っていていて同じスタイルが適用される

試してほしいこと

import React from 'react';

...

const Index = () => {
  ...

  if (loading) {
    return (
      <div className="mb-20 mt-10"> // <- divタグからmainタグに書き換えてほしい
        ...loading
      </div>
    )
  }
  return (
    <div>
      ...
    </div>
  )
}
export default Index

おまけ

自分の場合は上記のように、divタグをmainタグに書き換え、タグの重複を避けた場合に同じclassNameが適応されることはなくなりました。

経緯とか

https://kajirikajiri.netlify.app/20201227222747/

Discussion