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)/docs/[...slug]/page.tsx

@@ -9,8 +9,6 @@ import { cn } from '@kit/ui/utils';
 
 import { withI18n } from '~/lib/i18n/with-i18n';
 
-// styles
-import styles from '../../blog/_components/html-renderer.module.css';
 // local imports
 import { DocsCards } from '../_components/docs-cards';
 import { DocsTableOfContents } from '../_components/docs-table-of-contents';
@@ -61,20 +59,18 @@ async function DocumentationPage({ params }: DocumentationPageProps) {
   );
 
   return (
-    <div className={'flex flex-1 flex-col space-y-4 overflow-y-hidden'}>
+    <div className={'flex flex-1 flex-col gap-y-4 overflow-y-hidden py-5'}>
       <div className={'flex overflow-y-hidden'}>
-        <article
-          className={cn(styles.HTML, 'container space-y-12 overflow-y-auto')}
-        >
-          <section className={'flex flex-col space-y-4 pt-6'}>
-            <h1 className={'!my-0'}>{page.title}</h1>
+        <article className={cn('gap-y-12 overflow-y-auto px-6')}>
+          <section className={'flex flex-col gap-y-2.5'}>
+            <h1 className={'text-3xl font-semibold text-foreground'}>{page.title}</h1>
 
-            <h2 className={'!mb-0 !font-normal !text-muted-foreground'}>
-              {description}
-            </h2>
+            <h2 className={'text-muted-foreground text-lg'}>{description}</h2>
           </section>
 
-          <ContentRenderer content={page.content} />
+          <div className={'markdoc'}>
+            <ContentRenderer content={page.content} />
+          </div>
         </article>
 
         <DocsTableOfContents data={headings} />

apps/web/app/(marketing)/docs/_components/docs-card.tsx

@@ -17,14 +17,14 @@ export function DocsCard({
   return (
     <div className="flex flex-col">
       <div
-        className={`flex grow flex-col space-y-2.5 border bg-background p-6 ${link ? 'rounded-t-2xl border-b-0' : 'rounded-2xl'}`}
+        className={`bg-background flex grow flex-col gap-y-2 border p-6 ${link ? 'rounded-t-lg border-b-0' : 'rounded-lg'}`}
       >
         <h3 className="mt-0 text-lg font-semibold hover:underline dark:text-white">
           <Link href={link.url}>{title}</Link>
         </h3>
 
         {subtitle && (
-          <div className="text-sm text-muted-foreground">
+          <div className="text-muted-foreground text-sm">
             <p dangerouslySetInnerHTML={{ __html: subtitle }}></p>
           </div>
         )}
@@ -33,17 +33,19 @@ export function DocsCard({
       </div>
 
       {link && (
-        <div className="rounded-b-2xl border bg-muted p-6 py-4 dark:bg-background">
-          <span className={'flex items-center space-x-2'}>
-            <Link
-              className={'text-sm font-medium hover:underline'}
-              href={link.url}
-            >
+        <div className="bg-muted/50 rounded-b-lg border p-6 py-4">
+          <Link
+            className={
+              'flex items-center space-x-2 text-sm font-medium hover:underline'
+            }
+            href={link.url}
+          >
+            <span>
               {link.label ?? <Trans i18nKey={'marketing:readMore'} />}
-            </Link>
+            </span>
 
             <ChevronRight className={'h-4'} />
-          </span>
+          </Link>
         </div>
       )}
     </div>

apps/web/app/(marketing)/docs/_components/docs-nav-link.tsx

@@ -22,8 +22,8 @@ export function DocsNavLink({
       <SidebarMenuButton
         asChild
         isActive={isCurrent}
-        className={cn('border-l-3 transition-background !font-normal', {
-          'font-bold text-secondary-foreground': isCurrent,
+        className={cn('transition-background font-normal!', {
+          'text-secondary-foreground font-bold': isCurrent,
         })}
       >
         <Link href={url}>

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -116,7 +116,7 @@ export function DocsNavigation({
     <>
       <Sidebar
         variant={'ghost'}
-        className={'z-1 sticky max-h-full overflow-y-auto'}
+        className={'sticky z-1 mt-4 max-h-full overflow-y-auto'}
       >
         <SidebarGroup>
           <SidebarGroupContent>

apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx

@@ -13,7 +13,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
   const navData = props.data;
 
   return (
-    <div className="sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] border-l bg-background p-4 lg:block">
+    <div className="bg-background sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] border-l p-4 lg:block">
       <ol
         role="list"
         className="relative text-sm text-gray-600 dark:text-gray-400"
@@ -22,7 +22,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
           <li key={item.href} className="group/item relative mt-3 first:mt-0">
             <a
               href={item.href}
-              className="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]"
+              className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
             >
               {item.text}
             </a>
@@ -35,7 +35,7 @@ export function DocsTableOfContents(props: { data: NavItem[] }) {
                   >
                     <Link
                       href={child.href}
-                      className="block transition-colors hover:text-gray-950 dark:hover:text-white [&_*]:[font:inherit]"
+                      className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
                     >
                       {child.text}
                     </Link>

apps/web/app/(marketing)/docs/layout.tsx

@@ -14,7 +14,7 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
 
   return (
     <SidebarProvider
-      style={{ '--sidebar-width': '20em' } as React.CSSProperties}
+      style={{ '--sidebar-width': '18em' } as React.CSSProperties}
       className={'h-[calc(100vh-72px)] overflow-y-hidden lg:container'}
     >
       <DocsNavigation pages={tree} />

apps/web/app/(marketing)/docs/page.tsx

@@ -21,7 +21,7 @@ async function DocsPage() {
   const cards = items.filter((item) => !item.parentId);
 
   return (
-    <div className={'flex flex-col space-y-6 xl:space-y-10'}>
+    <div className={'flex flex-col gap-y-6 xl:gap-y-10'}>
       <SitePageHeader
         title={t('marketing:documentation')}
         subtitle={t('marketing:documentationSubtitle')}