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/home/(user)/_components/home-sidebar.tsx

@@ -29,7 +29,7 @@ export function HomeSidebar(props: HomeSidebarProps) {
   return (
     <Sidebar>
       <SidebarHeader className={'h-16 justify-center'}>
-        <div className={'flex items-center justify-between space-x-2'}>
+        <div className={'flex items-center justify-between gap-x-3'}>
           <If
             condition={featuresFlagConfig.enableTeamAccounts}
             fallback={

apps/web/app/home/[account]/_components/dashboard-demo-charts.tsx

@@ -47,7 +47,7 @@ export default function DashboardDemo() {
   return (
     <div
       className={
-        'flex flex-col space-y-4 pb-36 duration-500 animate-in fade-in'
+        'animate-in fade-in flex flex-col space-y-4 pb-36 duration-500'
       }
     >
       <div
@@ -189,11 +189,11 @@ function Chart(
   const chartConfig = {
     desktop: {
       label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      color: 'var(--chart-1)',
     },
     mobile: {
       label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      color: 'var(--chart-2)',
     },
   } satisfies ChartConfig;
 
@@ -423,7 +423,7 @@ function CustomersTable() {
           <TableRow key={customer.name}>
             <TableCell className={'flex flex-col'}>
               <span>{customer.name}</span>
-              <span className={'text-sm text-muted-foreground'}>
+              <span className={'text-muted-foreground text-sm'}>
                 {customer.email}
               </span>
             </TableCell>
@@ -482,7 +482,7 @@ function Trend(
       case 'up':
         return <ArrowUp className={'h-3 w-3 text-green-500'} />;
       case 'down':
-        return <ArrowDown className={'h-3 w-3 text-destructive'} />;
+        return <ArrowDown className={'text-destructive h-3 w-3'} />;
       case 'stale':
         return <Menu className={'h-3 w-3 text-orange-500'} />;
     }
@@ -604,11 +604,11 @@ export function VisitorsChart() {
     },
     desktop: {
       label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      color: 'var(--chart-1)',
     },
     mobile: {
       label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      color: 'var(--chart-2)',
     },
   } satisfies ChartConfig;
 
@@ -685,10 +685,10 @@ export function VisitorsChart() {
       <CardFooter>
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
-            <div className="flex items-center gap-2 font-medium leading-none">
+            <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="flex items-center gap-2 leading-none text-muted-foreground">
+            <div className="text-muted-foreground flex items-center gap-2 leading-none">
               January - June 2024
             </div>
           </div>
@@ -802,11 +802,11 @@ export function PageViewsChart() {
     },
     desktop: {
       label: 'Desktop',
-      color: 'hsl(var(--chart-1))',
+      color: 'var(--chart-1)',
     },
     mobile: {
       label: 'Mobile',
-      color: 'hsl(var(--chart-2))',
+      color: 'var(--chart-2)',
     },
   } satisfies ChartConfig;
 
@@ -836,13 +836,13 @@ export function PageViewsChart() {
               <button
                 key={chart}
                 data-active={activeChart === chart}
-                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+                className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
                 onClick={() => setActiveChart(chart)}
               >
-                <span className="text-xs text-muted-foreground">
+                <span className="text-muted-foreground text-xs">
                   {chartConfig[chart].label}
                 </span>
-                <span className="text-lg font-bold leading-none sm:text-3xl">
+                <span className="text-lg leading-none font-bold sm:text-3xl">
                   {total[key as keyof typeof total].toLocaleString()}
                 </span>
               </button>

apps/web/app/home/[account]/_components/team-account-layout-mobile-navigation.tsx

@@ -98,7 +98,7 @@ function DropdownLink(
     <DropdownMenuItem asChild>
       <Link
         href={props.path}
-        className={'flex h-12 w-full items-center space-x-2 px-3'}
+        className={'flex h-12 w-full items-center gap-x-3 px-3'}
       >
         {props.Icon}