refactor: replace all remaining css modules with tailwindcss

package.json

@@ -72,7 +72,7 @@
 		"autoprefixer": "^10.4.13",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.34.0",
-		"eslint-plugin-tailwindcss": "^3.9.0",
+		"eslint-plugin-tailwindcss": "^3.15.1",
 		"graphology-types": "^0.24.7",
 		"lint-staged": "^13.1.2",
 		"npm-run-all": "^4.1.5",
@@ -81,7 +81,7 @@
 		"prettier": "^2.8.4",
 		"simple-git-hooks": "^2.8.1",
 		"stylelint": "^15.2.0",
-		"tailwindcss": "^3.2.7",
+		"tailwindcss": "^3.4.3",
 		"tsx": "^3.12.3",
 		"typescript": "^4.9.5"
 	},

src/app/error-page.tsx

@@ -1,8 +1,6 @@
-import styles from "@/app/error-page.module.css";
-
 export function ErrorPage(): JSX.Element {
 	return (
-		<main className={styles["container"]}>
+		<main className="grid h-full place-items-center">
 			<div role="alert">
 				<p>😢 Something went horribly wrong.</p>
 			</div>

src/app/logo.tsx

@@ -1,11 +1,9 @@
 import { range } from "@stefanprobst/range";
 import type { CSSProperties } from "react";
 
-import styles from "@/app/logo.module.css";
-
 export function Logo(): JSX.Element {
 	return (
-		<div aria-hidden className={styles["container"]}>
+		<div aria-hidden className="inline-flex items-center">
 			<Hexagon color="var(--color-primary)" />
 			<Hexagon color="var(--color-secondary)" />
 			<Hexagon color="var(--color-tertiary)" />
@@ -24,7 +22,7 @@ function Hexagon(props: HexagonProps): JSX.Element {
 	const diameter = radius * 2;
 
 	return (
-		<svg className={styles["hexagon"]} viewBox={`0 0 ${diameter} ${diameter}`}>
+		<svg className="h-8" viewBox={`0 0 ${diameter} ${diameter}`}>
 			<polygon fill={color} points={createPoints(radius)} />
 		</svg>
 	);

src/app/page-content.tsx

@@ -1,13 +1,11 @@
 import type { ReactNode } from "react";
 
-import styles from "@/app/page-content.module.css";
-
 interface PageContentProps {
 	children: ReactNode;
 }
 
 export function PageContent(props: PageContentProps): JSX.Element {
 	const { children } = props;
 
-	return <main className={styles["container"]}>{children}</main>;
+	return <main className="p-8">{children}</main>;
 }

src/app/page-footer.tsx

@@ -1,11 +1,9 @@
 import Link from "next/link";
 
-import styles from "@/app/page-footer.module.css";
-
 export function PageFooter(): JSX.Element {
 	return (
-		<footer className={styles["container"]}>
-			<small className={styles["copyright"]}>
+		<footer className="flex items-center justify-between p-4 text-sm">
+			<small className="inline-flex gap-2 text-sm">
 				<span>&copy; {new Date().getUTCFullYear()}</span>
 				<a href="https://www.oeaw.ac.at/acdh" rel="noreferrer" target="_blank">
 					ACDH-CH

src/app/page-header.tsx

@@ -1,11 +1,10 @@
 import Link from "next/link";
 
 import { Logo } from "@/app/logo";
-import styles from "@/app/page-header.module.css";
 
 export function PageHeader(): JSX.Element {
 	return (
-		<header className={styles["container"]}>
+		<header className="p-4">
 			<Link aria-label="Home" href={{ pathname: "/" }}>
 				<Logo />
 			</Link>

src/app/page.layout.tsx

@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 
-import styles from "@/app/page.layout.module.css";
 import { PageFooter } from "@/app/page-footer";
 import { PageHeader } from "@/app/page-header";
 
@@ -12,7 +11,7 @@ export function PageLayout(props: PageLayoutProps): JSX.Element {
 	const { children } = props;
 
 	return (
-		<div className={styles["container"]}>
+		<div className="grid min-h-full grid-rows-[auto_1fr_auto]">
 			<PageHeader />
 			{children}
 			<PageFooter />

src/features/home/apis-instance-list.tsx

@@ -1,13 +1,15 @@
 import { useApis } from "@/features/apis/apis.context";
 import { ApisInstance } from "@/features/home/apis-instance";
-import styles from "@/features/home/apis-instance-list.module.css";
 
 export function ApisInstanceList(): JSX.Element {
 	const { config } = useApis();
 	const { instances } = config;
 
 	return (
-		<ul className={styles["container"]} role="list">
+		<ul
+			className="my-4 grid grid-cols-[repeat(auto-fill,minmax(min(384px,100%),1fr))] gap-12"
+			role="list"
+		>
 			{Object.values(instances).map((instance, index) => {
 				return (
 					<li key={instance.id}>

src/features/home/apis-instance.tsx

@@ -2,7 +2,6 @@ import cx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
 
-import styles from "@/features/home/apis-instance.module.css";
 import type { ApisInstanceConfig } from "~/config/apis.config";
 
 interface ApisInstanceProps {
@@ -16,7 +15,7 @@ export function ApisInstance(props: ApisInstanceProps): JSX.Element {
 	const hasImage = instance.image.length > 0;
 
 	return (
-		<article className={styles["container"]}>
+		<article className="grid grid-rows-[256px_auto] overflow-hidden rounded shadow-md">
 			<div
 				className={cx(
 					"relative border",
@@ -27,7 +26,7 @@ export function ApisInstance(props: ApisInstanceProps): JSX.Element {
 					instance.image.startsWith("/assets/images") ? (
 						<Image
 							alt=""
-							className="absolute inset-0 h-full w-full object-cover"
+							className="absolute inset-0 size-full object-cover"
 							fill
 							/** Preload first three images. */
 							priority={index < 3}
@@ -36,26 +35,22 @@ export function ApisInstance(props: ApisInstanceProps): JSX.Element {
 						/>
 					) : (
 						// eslint-disable-next-line @next/next/no-img-element
-						<img
-							alt=""
-							className="absolute inset-0 h-full w-full object-cover"
-							src={instance.image}
-						/>
+						<img alt="" className="absolute inset-0 size-full object-cover" src={instance.image} />
 					)
 				) : null}
 			</div>
-			<div className={styles["content"]}>
-				<header>
-					<h2>
+			<div className="grid gap-8 p-8 ">
+				<header className="grid gap-4">
+					<h2 className="text-2xl">
 						<Link href={{ pathname: `/networks/${instance.id}` }}>{instance.title}</Link>
 					</h2>
-					<h3>{instance.subtitle}</h3>
+					<h3 className="text-lg">{instance.subtitle}</h3>
 				</header>
-				<p>{instance.description}</p>
-				<footer>
+				<p className="line-clamp-[8]">{instance.description}</p>
+				<footer className="flex items-center justify-between">
 					<a
 						aria-label={`More info on ${instance.title}`}
-						className={styles["link"]}
+						className="hover:underline"
 						href={instance.url}
 						rel="noreferrer"
 						target="_blank"
@@ -64,7 +59,7 @@ export function ApisInstance(props: ApisInstanceProps): JSX.Element {
 					</a>
 					<Link
 						aria-label={`Explore ${instance.title} dataset`}
-						className={styles["link-button"]}
+						className="rounded bg-primary px-6 py-2 font-semibold text-white transition hover:bg-primary-dark"
 						href={{ pathname: `/networks/${instance.id}` }}
 					>
 						Explore dataset

src/features/home/home-page-lead-in.tsx

@@ -1,13 +1,15 @@
 import type { ReactNode } from "react";
 
-import styles from "@/features/home/home-page-lead-in.module.css";
-
 interface HomePageLeadInProps {
 	children: ReactNode;
 }
 
 export function HomePageLeadIn(props: HomePageLeadInProps): JSX.Element {
 	const { children } = props;
 
-	return <p className={styles["text"]}>{children}</p>;
+	return (
+		<p className="max-w-[80ch] text-lg text-gray-700 [&_a:hover]:no-underline [&_a]:underline [&_a]:decoration-dotted">
+			{children}
+		</p>
+	);
 }

src/features/home/home-page-title.tsx

@@ -1,13 +1,11 @@
 import type { ReactNode } from "react";
 
-import styles from "@/features/home/home-page-title.module.css";
-
 interface HomePageTitleProps {
 	children: ReactNode;
 }
 
 export function HomePageTitle(props: HomePageTitleProps): JSX.Element {
 	const { children } = props;
 
-	return <h1 className={styles["heading"]}>{children}</h1>;
+	return <h1 className="text-[2.2rem]">{children}</h1>;
 }

src/features/home/home.layout.tsx

@@ -1,13 +1,11 @@
 import type { ReactNode } from "react";
 
-import styles from "@/features/home/home.layout.module.css";
-
 interface HomeLayoutProps {
 	children: ReactNode;
 }
 
 export function HomeLayout(props: HomeLayoutProps): JSX.Element {
 	const { children } = props;
 
-	return <div className={styles["container"]}>{children}</div>;
+	return <div className="grid gap-8">{children}</div>;
 }