Add Tailwind CSS (#425)

* Install and configure tailwind

* Fix style issues

src/app/components/Card.tsx

@@ -10,7 +10,7 @@ export function Card({ title, overlay, link, children }: Props) {
 	const content = <>
 		{overlay && <span class="card-overlay">{overlay}</span>}
 		<div class="card-content">
-			{title && <h3 class="card-title">{title}</h3>}
+			{title && <h3 class="card-title font-bold text-[1.17em]">{title}</h3>}
 			{children}
 		</div>
 	</>

src/app/components/Header.tsx

@@ -23,7 +23,7 @@ export function Header() {
 	return <header>
 		<div class="title">
 			<Link class="home-link" href="/" aria-label={locale('home')} data-cy="home-link">{Icons.home}</Link>
-			<h1>{title}</h1>
+			<h1 class="font-bold">{title}</h1>
 			{gen && <BtnMenu icon="chevron_down" tooltip={locale('switch_generator')} data-cy="generator-switcher">
 				{config.generators
 					.filter(g => g.tags?.[0] === gen?.tags?.[0] && checkVersion(version, g.minVersion))

src/app/components/ToolCard.tsx

@@ -25,7 +25,7 @@ export function ToolCard({ title, desc, link, icon, titleIcon }: Props) {
 }
 
 function ToolHead({ title, titleIcon }: Pick<Props, 'title' | 'titleIcon'>) {
-	return <h3>
+	return <h3 class="text-[1.17em]">
 		{title}
 		{titleIcon && (titleIcon in Octicon ? (Octicon as any)[titleIcon] : (Icons as any)[titleIcon])}
 	</h3>

src/app/components/ToolGroup.tsx

@@ -12,7 +12,7 @@ interface Props {
 export function ToolGroup({ title, titleIcon, link, children }: Props) {
 	return <div class="tool-group">
 		{link === undefined
-			? <div class="tool-card"><h3>{title}</h3></div>
+			? <div class="tool-card"><h3 class="text-[1.17em]">{title}</h3></div>
 			: <ToolCard {...{ title, titleIcon, link}} />
 		}
 		{children && <div class="tool-body">

src/app/components/whatsnew/WhatsNewEntry.tsx

@@ -9,7 +9,7 @@ export function WhatsNewEntry({ item }: EntryProps) {
 	return <article class="whats-new-entry">
 		<a href={item.url} target="_blank">
 			<WhatsNewTime item={item} />
-			<h2>{item.title}</h2>
+			<h2 class="font-bold text-[27px]">{item.title}</h2>
 		</a>
 		<div class="guide-content" dangerouslySetInnerHTML={{ __html: marked(item.body) }} />
 	</article>