Tailwind CSS 4 Migration (#100)

* Updated to TailwindCSS v4
* Moved CSS module to its own CSS file because of lightingcss strict validation
* Respect next parameter in middleware
* Updated all packages. 
* Split CSSs for better organization.
* Redesigned theme and auth pages
* Improved pill and header design
* Formatted files using Prettier
* Better footer layout
* Better auth layout
* Bump version of the repository to 2.0.0

apps/web/app/(marketing)/blog/_components/html-renderer.module.css

@@ -1,126 +0,0 @@
-.HTML {
-  @apply text-secondary-foreground;
-}
-
-.HTML h1 {
-  @apply mt-14 text-4xl font-semibold font-heading tracking-tight;
-}
-
-.HTML h2 {
-  @apply mb-6 mt-12 font-semibold text-2xl font-heading tracking-tight;
-}
-
-.HTML h3 {
-  @apply mt-12 text-xl font-semibold font-heading tracking-tight;
-}
-
-.HTML h4 {
-  @apply mt-8 text-lg font-medium tracking-tight;
-}
-
-.HTML h5 {
-  @apply mt-6 text-base font-medium tracking-tight;
-}
-
-.HTML h6 {
-  @apply mt-2 text-sm font-normal tracking-tight;
-}
-
-/**
-Tailwind "dark" variants do not work with CSS Modules
-We work it around using :global(.dark)
-For more info: https://github.com/tailwindlabs/tailwindcss/issues/3258#issuecomment-770215347
-*/
-:global(.dark) .HTML h1,
-:global(.dark) .HTML h2,
-:global(.dark) .HTML h3,
-:global(.dark) .HTML h4,
-:global(.dark) .HTML h5,
-:global(.dark) .HTML h6 {
-  @apply text-white;
-}
-
-.HTML p {
-  @apply mb-6 mt-4 text-base leading-7 text-muted-foreground;
-}
-
-.HTML li {
-  @apply relative my-1.5 text-base leading-7 text-muted-foreground;
-}
-
-.HTML ul > li:before {
-  content: '-';
-
-  @apply mr-2;
-}
-
-.HTML ol > li:before {
-  @apply inline-flex font-medium text-muted-foreground;
-
-  content: counters(counts, '.') '. ';
-  font-feature-settings: 'tnum';
-}
-
-.HTML b,
-.HTML strong {
-  @apply font-semibold text-secondary-foreground;
-}
-
-:global(.dark) .HTML b,
-:global(.dark) .HTML strong {
-  @apply text-white;
-}
-
-.HTML img,
-.HTML video {
-  @apply rounded-md;
-}
-
-.HTML ul,
-.HTML ol {
-  @apply pl-1;
-}
-
-.HTML ol > li {
-  counter-increment: counts;
-}
-
-.HTML ol > li:before {
-  @apply mr-2 inline-flex font-semibold;
-
-  content: counters(counts, '.') '. ';
-  font-feature-settings: 'tnum';
-}
-
-.HTML p > code, .HTML li > code {
-  @apply p-0.5 text-sm font-semibold bg-muted/50 border font-mono text-secondary-foreground;
-}
-
-.HTML blockquote {
-  @apply my-4 border-l-8 border border-primary px-6 py-4 text-lg font-medium text-muted-foreground;
-}
-
-.HTML a {
-  @apply border-b-black border-b hover:border-b-2 pb-0.5 text-secondary-foreground font-semibold;
-}
-
-:global(.dark) .HTML a {
-  @apply border-yellow-300;
-}
-
-.HTML hr {
-  @apply mt-8 mb-6 border-border;
-}
-
-.HTML [role='alert'] {
-  @apply py-4 m-0 my-8;
-}
-
-.HTML [role='alert'] * {
-  color: inherit;
-  @apply m-0 p-0 text-sm;
-}
-
-.HTML [role='alert'] h5 {
-  color: inherit;
-}

apps/web/app/(marketing)/blog/_components/post-preview.tsx

@@ -25,7 +25,7 @@ export function PostPreview({
   const slug = `/blog/${post.slug}`;
 
   return (
-    <div className="flex flex-col space-y-4 rounded-lg transition-shadow duration-500">
+    <div className="transition-shadow-sm flex flex-col gap-y-4 rounded-lg duration-500">
       <If condition={image}>
         {(imageUrl) => (
           <div className="relative mb-2 w-full" style={{ height }}>
@@ -42,13 +42,13 @@ export function PostPreview({
 
       <div className={'flex flex-col space-y-4 px-1'}>
         <div className={'flex flex-col space-y-2'}>
-          <h2 className="text-2xl font-semibold leading-snug tracking-tight">
+          <h2 className="text-xl leading-snug font-semibold tracking-tight">
             <Link href={slug} className="hover:underline">
               {title}
             </Link>
           </h2>
 
-          <div className="flex flex-row items-center space-x-2 text-sm">
+          <div className="flex flex-row items-center gap-x-3 text-sm">
             <div className="text-muted-foreground">
               <DateFormatter dateString={publishedAt} />
             </div>
@@ -56,7 +56,7 @@ export function PostPreview({
         </div>
 
         <p
-          className="mb-4 text-sm leading-relaxed text-muted-foreground"
+          className="text-muted-foreground mb-4 text-sm leading-relaxed"
           dangerouslySetInnerHTML={{ __html: description ?? '' }}
         />
       </div>

apps/web/app/(marketing)/blog/_components/post.tsx

@@ -1,7 +1,6 @@
 import type { Cms } from '@kit/cms';
 import { ContentRenderer } from '@kit/cms';
 
-import styles from './html-renderer.module.css';
 import { PostHeader } from './post-header';
 
 export function Post({
@@ -16,7 +15,7 @@ export function Post({
       <PostHeader post={post} />
 
       <div className={'mx-auto flex max-w-3xl flex-col space-y-6 py-8'}>
-        <article className={styles.HTML}>
+        <article className="markdoc">
           <ContentRenderer content={content} />
         </article>
       </div>