Convert home page to Tailwind

[bmorrisondev]

Lots of OG CSS in the global styles file.

[ryandotfurrer]

I began working on this today. Let me know if you want me to continue working in this direction. I fear I may be making this more complicated than it needs to be.

1. I put the body styles in global.css on the main element in the index.tsx file.
2. I started by creating a couple of template components that contain the reusable styles so they don't have to be re-declared every time another p or a is on the page.

You can see those commits below. I was planning on completing all before issuing a PR, but let me know if you would rather I do one sooner than that.

1. Add body styles to the main element in the index.tsx file
2. Second commit for the body styles
3. H1 Component Creation
4. ExternalLink Component Creation

[bmorrisondev]

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>
}

[bmorrisondev]

@ryanfurrer hold on this for now, looking to implement a completely update design.

[ryandotfurrer]

@ryanfurrer hold on this for now, looking to implement a completely update design.

Can do. I would be happy to jump back in or help implement the redesign if my schedule allows it.