Ok a few things:

I generally will still style some top level tags (body, h1, etc...) in global.css and either use the @apply directive or just normal CSS. No need to create separate components for them. Something like button is an exception because those usually have alot of styling on them, so they can be their own components.
Anything that is a class in the CSS file (ie: .layout) should have a component with the necessary tailwind classes. The upstream main branch has a <Layout> component for exactly this, so once you merge in from the upstream we can scrap the layout class altogether, was just using it as an example.
With tailwind, you can use the hover: directive to alter styles based on hover state (and disabled: too). So no need to use state with string manipulation to modify hover styles. For ex, if I have text and I use text-red-900 hover:text-red-400, the text will be red-900 by default and red-400 when hovered.
Regarding the ExternalLink component, React supports passing in nested stuff to a component using the children prop name with the ReactNode type:

type Props = {
  children: ReactNode
}

function MyComp({ children }: Props) {
  <div>
    { children }
  </div>
}

Convert home page to Tailwind #30

Description