[Sugestão] Outra abordagem para se trabalhar com TailwindCSS

Quem achar que o TailwindCSS polui todo o componente React, sugiro a seguinte abordagem de desenvolvimento, separando as classes utilitárias em um objeto Javascript:

  return (
    <GridWrapper>
      <main className={style.wrapperMainContent}>
        <header className={style.header}>
          <span className={style.title}>{manga?.title}</span>
          <span className={style.author}>{manga?.author}</span>
        </header>
        <div className={style.wrapperMangaInfos}>
          <div className={style.flexContainer}>
            <section className={style.firstSection}>
              <img src={manga?.cover} className={style.mangaCover} />
              {handleDesktopLayout('status')}
              {handleMobileLayout('info')}
            </section>
            <section className={style.secondSection}>
              {handleDesktopLayout('info')}
              {handleMobileLayout('status')}
            </section>
          </div>
          <Recommendations recMangas={recMangas} />
        </div>
      </main>
    </GridWrapper>
  )
}

const style = {
  wrapperMainContent: `w-screen md:w-full`,
  header: `py-2 cursor-default px-2 md:px-4 flex items-center justify-between bg-prime-blue text-fill-weak text-2xl font-semibold`,
  title: `w-full md:w-[80%]`,
  author: `text-xl hidden md:inline-block font-medium`,
  wrapperMangaInfos: `pb-24 md:p-4 md:pb-14`,
  flexContainer: `flex`,
  firstSection: `w-full max-w-[170px] md:max-w-[225px]`,
  mangaCover: `w-full h-full max-w-[170px] max-h-[225px] md:max-w-[225px] md:max-h-[300px]`,
  secondSection: `w-fit mx-auto`,
}

Vantagens em utilizar TailwindCSS:

• Você não precisa ter a lógica de renderização e estilização do componente React em um arquivo separado, assim tudo referente ao componente, permanece no componente.
• Você não precisa gastar mais que 10 linhas para estilizar um componente, e nem gastar tempo.
• Já vem com reset CSS padrão.
• Fácil implementação de Design System, você pode simplesmente remover todas as classes de espaçamentos, de cores e tudo mais para criar seus próprios espaçamento e paleta de cores, fazendo a aplicação respeitar um determinado Design System.

Obs.: Acho que o nome da última aula está errado "Publicando o jogo". Eu ainda não completei o curso, mas até agora ele está aplicando o Tailwind em uma Newsletter, enfim se ele trocar para um jogo será um Plot Twist.