style: migrate to tailwind v4

Author: AugustinMauroy

app/article/[[...categories]]/page.module.css

@@ -1,7 +1,6 @@
 import { CategoriesSelector } from '~/components/Common/CategoriesSelector/index.tsx';
 import { ArticleCard } from '~/components/Post/ArticleCard/index.tsx';
 import { getPostsMetadata } from '~/lib/post.ts';
-import styles from './page.module.css';
 import type { FC } from 'react';
 import type { Metadata } from 'next';
 
@@ -60,9 +59,9 @@ const Page: FC<PageProps> = async ({ params }) => {
 	const postsMetadata = await getPostsMetadata(currentCategories[0]);
 
 	return (
-		<main className={styles.page}>
-			<h1>Article list</h1>
-			<p>
+		<main className="container mx-auto px-4 py-8">
+			<h1 className="mb-4 font-bold text-3xl lg:text-4xl">Article list</h1>
+			<p className="mb-4 max-w-screen-md text-gray-500 dark:text-gray-400">
 				Here you can find all the articles available on the website. You can
 				filter them by category using the dropdown below.
 			</p>
@@ -71,11 +70,13 @@ const Page: FC<PageProps> = async ({ params }) => {
 				categories={CATEGORIES}
 			/>
 			{postsMetadata.length === 0 ? (
-				<div className={styles.noArticles}>
-					<p>No articles here for now</p>
+				<div className="mt-8">
+					<p className="ext-transparent bg-gradient-to-r from-green-300 to-green-800 bg-clip-text text-center font-black text-3xl">
+						No articles here for now
+					</p>
 				</div>
 			) : (
-				<div className={styles.articles}>
+				<div className="grid grid-cols-1 justify-center gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{postsMetadata.map(post => (
 						<ArticleCard key={post.slug} {...post} />
 					))}

app/article/[[...categories]]/page.tsx

@@ -2,7 +2,6 @@ import { notFound } from 'next/navigation';
 import { getContent } from '~/lib/content.ts';
 import { getAllPosts } from '~/lib/post.ts';
 import { ArticleHeader } from '~/components/Post/ArticleHeader/index.tsx';
-import styles from './page.module.css';
 import type { FC } from 'react';
 import type { Metadata } from 'next';
 import type { PostFrontmatter } from '~/types/frontmatter';
@@ -54,7 +53,7 @@ const Page: FC<PageProps> = async ({ params }) => {
 	const { content, frontmatter } = mdxResult;
 
 	return (
-		<main className={styles.page}>
+		<main className="container mx-auto px-4">
 			<ArticleHeader
 				title={frontmatter.title}
 				description={frontmatter.description}

app/article/post/[article]/page.module.css

@@ -1,7 +1,6 @@
 import { getGitHubAvatarUrl, getGithubProfileUrl } from '~/utils/gitHubUtils';
 import { getAcronymFromString } from '~/utils/stringUtils';
 import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/index.tsx';
-import styles from './index.module.css';
 import type { FC } from 'react';
 
 type AuthorsListProps = {
@@ -23,5 +22,5 @@ export const AuthorsList: FC<AuthorsListProps> = ({ authors }) => {
 		</Avatar>
 	));
 
-	return <div className={styles.wrapper}>{authorsList}</div>;
+	return <div className="flex space-x-2 py-2">{authorsList}</div>;
 };

app/article/post/[article]/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import classNames from 'classnames';
-import styles from './index.module.css';
 import type { ComponentProps } from 'react';
 
 const Avatar = ({
@@ -11,7 +10,10 @@ const Avatar = ({
 }: ComponentProps<typeof AvatarPrimitive.Root>) => (
 	<AvatarPrimitive.Root
 		ref={ref}
-		className={classNames(className, styles.root)}
+		className={classNames(
+			className,
+			'flex size-10 shrink-0 overflow-hidden rounded-md shadow-green-300 shadow-sm outline-2 outline-green-300 transition-shadow hover:shadow-green-400 hover:shadow-md dark:shadow-green-800 dark:outline-green-800 hover:dark:shadow-green-700'
+		)}
 		{...props}
 	/>
 );
@@ -25,7 +27,7 @@ const AvatarImage = ({
 }: ComponentProps<typeof AvatarPrimitive.Image>) => (
 	<AvatarPrimitive.Image
 		ref={ref}
-		className={classNames(styles.image, className)}
+		className={classNames('aspect-square size-full', className)}
 		{...props}
 	/>
 );
@@ -39,7 +41,10 @@ const AvatarFallback = ({
 }: ComponentProps<typeof AvatarPrimitive.Fallback>) => (
 	<AvatarPrimitive.Fallback
 		ref={ref}
-		className={classNames(styles.fallback, className)}
+		className={classNames(
+			'flex size-full items-center justify-center rounded-md bg-green-100 font-bold text-base text-black dark:bg-green-800 dark:text-white',
+			className
+		)}
 		{...props}
 	/>
 );

components/Common/AuthorsList/index.module.css

@@ -1,5 +1,7 @@
+@reference "../../../styles/globals.css";
+
 .button {
-	@apply rounded
+	@apply rounded-sm
 		inline-flex
 		items-center
 		justify-center
@@ -8,15 +10,9 @@
 		py-2
 		transition
 		duration-300
-		ease-in-out;
-
-	&:focus {
-		@apply outline-none;
-	}
-
-	svg {
-		@apply size-5;
-	}
+		ease-in-out
+		focus:outline-none
+		has-[svg]:*:size-5;
 }
 
 .primary {
@@ -26,15 +22,12 @@
 		bg-green-500
 		text-white
 		dark:bg-green-400
-		dark:text-gray-900;
-
-	&:hover {
-		@apply border-gray-600
-			bg-transparent
-			text-gray-600
-			dark:text-gray-300
-			dark:border-gray-300;
-	}
+		dark:text-gray-900
+		hover:border-gray-600
+		hover:bg-transparent
+		hover:text-gray-600
+		hover:dark:text-gray-300
+		hover:dark:border-gray-300;
 }
 
 .secondary {
@@ -44,15 +37,12 @@
 		bg-gray-600
 		text-white
 		dark:bg-gray-300
-		dark:text-gray-900;
-
-	&:hover {
-		@apply border-gray-600
-			bg-transparent
-			text-gray-600
-			dark:text-gray-300
-			dark:border-gray-300;
-	}
+		dark:text-gray-900
+		hover:border-gray-600
+		hover:bg-transparent
+		hover:text-gray-600
+		hover:dark:text-gray-300
+		hover:dark:border-gray-300;
 }
 
 .special {
@@ -62,12 +52,9 @@
 		bg-transparent
 		text-gray-600
 		dark:text-gray-300
-		dark:border-gray-300;
-
-	&:hover {
-		@apply bg-green-500
-			text-white
-			dark:bg-green-400
-			dark:text-gray-900;
-	}
+		dark:border-gray-300
+		hover:bg-green-500
+		hover:text-white
+		hover:dark:bg-green-400
+		hover:dark:text-gray-900;
 }