Merge pull request #13 from collinschaafsma/chore/tailwind4-beta

tailwind4 beta
collinschaafsma · Jan 13, 2025 · e726ea8 · e726ea8
2 parents af5a96b + ba661b5
commit e726ea8
Show file tree

Hide file tree

Showing 42 changed files with 514 additions and 496 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,12 +4,9 @@
   "extends": [
     "next/core-web-vitals",
     "next/typescript",
-    "prettier",
-    "plugin:tailwindcss/recommended"
+    "prettier"
   ],
-  "plugins": ["tailwindcss"],
   "rules": {
-    "tailwindcss/no-custom-classname": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
@@ -23,12 +20,6 @@
       }
     ]
   },
-  "settings": {
-    "tailwindcss": {
-      "callees": ["cn", "cva"],
-      "config": "tailwind.config.ts"
-    }
-  },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],

diff --git a/app/(app)/_components/header.tsx b/app/(app)/_components/header.tsx
@@ -6,7 +6,7 @@ import { MobileNav } from "./nav"
 
 export function Header({ children }: Readonly<{ children?: React.ReactNode }>) {
   return (
-    <header className="sticky top-0 z-30 flex h-14 items-center justify-between gap-4 bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent md:ml-4 md:max-w-screen-xl md:pl-2 md:pr-0">
+    <header className="bg-background sticky top-0 z-30 flex h-14 items-center justify-between gap-4 px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent md:ml-4 md:max-w-(--breakpoint-xl) md:pr-0 md:pl-2">
       <MobileNav />
       {/* this allows you to optionally pass in other components like a breadcrumb or a search component from the page */}
       {children}

diff --git a/app/(app)/_components/nav/link.tsx b/app/(app)/_components/nav/link.tsx
@@ -20,7 +20,7 @@ export function DesktopNavLink({
     <Link
       href={href}
       className={cn(
-        "flex size-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:size-8",
+        "text-muted-foreground hover:text-foreground flex size-9 items-center justify-center rounded-lg transition-colors md:size-8",
         active && "bg-accent text-accent-foreground",
         className
       )}
@@ -47,7 +47,7 @@ export function MobileNavLink({
       onClick={closeNav}
       href={href}
       className={cn(
-        "flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground",
+        "text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5",
         active && "text-foreground",
         className
       )}

diff --git a/app/(app)/account/_components/paginator-provider.tsx b/app/(app)/account/_components/paginator-provider.tsx
@@ -54,7 +54,7 @@ export function PaginatorProvider<T extends GenericData>({
     }
 
     setHasMore(responseToPaginate?.hasMore || false)
-  }, [cursor])
+  }, [cursor, responseToPaginate])
 
   const handleNextPage = () => {
     if (responseToPaginate?.data.length) {

diff --git a/app/(app)/account/_components/payment-method-card.tsx b/app/(app)/account/_components/payment-method-card.tsx
@@ -32,7 +32,7 @@ function PaymentMethodCardSkeleton() {
 function PaymentMethodCardErrorFallback() {
   return (
     <>
-      <CardContent className="flex flex-col gap-2 text-destructive">
+      <CardContent className="text-destructive flex flex-col gap-2">
         <div className="flex">We are sorry.</div>
         <div className="flex text-sm">
           An error occurred while fetching payment methods.

diff --git a/app/(app)/account/_components/subscription-plan-card.tsx b/app/(app)/account/_components/subscription-plan-card.tsx
@@ -45,7 +45,7 @@ function SubscriptionPlanSkeleton() {
 function SubscriptionPlanErrorFallback() {
   return (
     <>
-      <CardContent className="flex flex-col gap-2 text-destructive">
+      <CardContent className="text-destructive flex flex-col gap-2">
         <div className="flex">We are sorry.</div>
         <div className="flex text-sm">
           An error occurred while fetching subscription plan.

diff --git a/app/(app)/account/page.tsx b/app/(app)/account/page.tsx
@@ -36,7 +36,7 @@ export default async function AccountPage(props: {
         </Breadcrumb>
       </Header>
       <main className="flex-1 p-6 md:p-4 md:py-0">
-        <div className="grid gap-4 md:max-w-screen-xl md:grid-cols-2">
+        <div className="grid gap-4 md:max-w-(--breakpoint-xl) md:grid-cols-2">
           <PaymentMethodCard />
           <SubscriptionPlanCard />
           <div className="flex flex-col gap-4 md:col-span-2">

diff --git a/app/(app)/dashboard/_components/customers-card.tsx b/app/(app)/dashboard/_components/customers-card.tsx
@@ -54,7 +54,7 @@ export async function LoadCustomersCard() {
   return (
     <>
       <div className="text-2xl font-bold">{customersData.current}</div>
-      <p className="text-xs text-muted-foreground">
+      <p className="text-muted-foreground text-xs">
         {customersData.percentageChange >= 0 ? "+" : ""}
         {customersData.percentageChange.toFixed(1)}% from last month
       </p>
@@ -82,7 +82,7 @@ export function CustomersCard() {
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">Customers</CardTitle>
-        <Users className="size-4 text-muted-foreground" />
+        <Users className="text-muted-foreground size-4" />
       </CardHeader>
       <CardContent>
         <ErrorBoundary fallback={<CustomersCardErrorFallback />}>

diff --git a/app/(app)/dashboard/_components/gross-card.tsx b/app/(app)/dashboard/_components/gross-card.tsx
@@ -55,7 +55,7 @@ async function LoadGrossCard() {
   return (
     <>
       <div className="text-2xl font-bold">${grossData.current}</div>
-      <p className="text-xs text-muted-foreground">
+      <p className="text-muted-foreground text-xs">
         {grossData.percentageChange >= 0 ? "+" : ""}
         {grossData.percentageChange.toFixed(1)}% from last month
       </p>
@@ -83,7 +83,7 @@ export function GrossCard() {
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">Gross</CardTitle>
-        <Landmark className="size-4 text-muted-foreground" />
+        <Landmark className="text-muted-foreground size-4" />
       </CardHeader>
       <CardContent>
         <ErrorBoundary fallback={<GrossCardErrorFallback />}>

diff --git a/app/(app)/dashboard/_components/mrr-card.tsx b/app/(app)/dashboard/_components/mrr-card.tsx
@@ -54,7 +54,7 @@ export async function LoadMRRCard() {
   return (
     <>
       <div className="text-2xl font-bold">${mrrData.current}</div>
-      <p className="text-xs text-muted-foreground">
+      <p className="text-muted-foreground text-xs">
         {mrrData.percentageChange >= 0 ? "+" : ""}
         {mrrData.percentageChange.toFixed(1)}% from last month
       </p>
@@ -82,7 +82,7 @@ export function MRRCard() {
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">MRR</CardTitle>
-        <Receipt className="size-4 text-muted-foreground" />
+        <Receipt className="text-muted-foreground size-4" />
       </CardHeader>
       <CardContent>
         <ErrorBoundary fallback={<MRRCardErrorFallback />}>

diff --git a/app/(app)/dashboard/_components/newsletter-contacts-card.tsx b/app/(app)/dashboard/_components/newsletter-contacts-card.tsx
@@ -57,7 +57,7 @@ async function LoadNewsletterContactsCard() {
   return (
     <>
       <div className="text-2xl font-bold">{data.current}</div>
-      <p className="text-xs text-muted-foreground">
+      <p className="text-muted-foreground text-xs">
         {data.percentageChange >= 0 ? "+" : ""}
         {data.percentageChange.toFixed(1)}% from last month
       </p>
@@ -97,7 +97,7 @@ export function NewsletterContactsCard() {
         <CardTitle className="text-sm font-medium">
           Newsletter Contacts
         </CardTitle>
-        <Mail className="size-4 text-muted-foreground" />
+        <Mail className="text-muted-foreground size-4" />
       </CardHeader>
       <CardContent>
         <ErrorBoundary fallback={<NewsletterContactsCardErrorFallback />}>

diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx
@@ -33,7 +33,7 @@ export default function DashboardPage() {
         </>
       </Header>
       <main className="flex-1 p-6 md:p-4 md:py-0">
-        <div className="grid gap-4 md:max-w-screen-xl md:grid-cols-4">
+        <div className="grid gap-4 md:max-w-(--breakpoint-xl) md:grid-cols-4">
           <MRRCard />
           <GrossCard />
           <CustomersCard />

diff --git a/app/(app)/error.tsx b/app/(app)/error.tsx
@@ -18,12 +18,12 @@ export default function ErrorPage({
   }, [error])
 
   return (
-    <section className="w-full border-y pb-8 pt-12 md:pt-24 lg:pt-32">
+    <section className="w-full border-y pt-12 pb-8 md:pt-24 lg:pt-32">
       <div className="flex flex-col items-center justify-center space-y-6">
         <h1 className="lg:leading-tighter text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl xl:text-[3.4rem] 2xl:text-[3.75rem]">
           Something went wrong
         </h1>
-        <p className="mt-4 max-w-[300px] text-gray-500 dark:text-gray-400 md:text-xl lg:max-w-[700px]">
+        <p className="mt-4 max-w-[300px] text-gray-500 md:text-xl lg:max-w-[700px] dark:text-gray-400">
           We experienced an error while processing your request. Our team has
           been notified and will investigate the issue.
         </p>

diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -44,7 +44,7 @@ export default function RootLayout({
       <PostHogProvider>
         <body
           className={cn(
-            "min-h-screen bg-background font-sans antialiased",
+            "bg-background min-h-screen font-sans antialiased",
             fontSans.variable
           )}
         >
@@ -56,8 +56,8 @@ export default function RootLayout({
               disableTransitionOnChange
             >
               <NavProvider>
-                <div className="flex min-h-screen w-full flex-col bg-muted/40">
-                  <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+                <div className="bg-muted/40 flex min-h-screen w-full flex-col">
+                  <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
                     <DesktopNav />
                   </aside>
                   {children}

diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
@@ -42,7 +42,7 @@ export default function RootLayout({
       <PostHogProvider>
         <body
           className={cn(
-            "min-h-screen bg-background font-sans antialiased",
+            "bg-background min-h-screen font-sans antialiased",
             fontSans.variable
           )}
         >

diff --git a/app/(auth)/sign-in/_components/sign-in-form.tsx b/app/(auth)/sign-in/_components/sign-in-form.tsx
@@ -74,7 +74,7 @@ export default function SignInForm({
               type="submit"
               aria-disabled={isPending}
               disabled={isPending}
-              className="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              className="flex w-full items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-xs hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
               name="provider"
               value="google"
             >
@@ -93,7 +93,7 @@ export default function SignInForm({
                   <span className="w-full border-t" />
                 </div>
                 <div className="relative flex justify-center text-xs uppercase">
-                  <span className="bg-background px-2 text-muted-foreground">
+                  <span className="bg-background text-muted-foreground px-2">
                     Or
                   </span>
                 </div>
@@ -129,12 +129,12 @@ export default function SignInForm({
                 )}
                 Continue With Email
               </Button>
-              <p className="flex w-full justify-center rounded-md border border-gray-300 bg-muted p-4 text-sm text-gray-500 dark:text-gray-400 md:text-xs">
+              <p className="bg-muted flex w-full justify-center rounded-md border border-gray-300 p-4 text-sm text-gray-500 md:text-xs dark:text-gray-400">
                 We&apos;ll email you a magic link.
               </p>
-              <p className="flex w-full text-sm text-gray-500 dark:text-gray-400 md:text-xs">
+              <p className="flex w-full text-sm text-gray-500 md:text-xs dark:text-gray-400">
                 Don&apos;t have an account?{" "}
-                <Link href="/sign-up" className="pl-2 text-primary underline">
+                <Link href="/sign-up" className="text-primary pl-2 underline">
                   Sign up
                 </Link>
               </p>

diff --git a/app/(marketing)/@comingSoon/page.tsx b/app/(marketing)/@comingSoon/page.tsx
@@ -3,14 +3,14 @@ import { NewsletterForm } from "../_components/newsletter-form"
 
 export default function ComingSoonPage() {
   return (
-    <section className="w-full border-y pb-8 pt-12 md:pt-24 lg:pt-32">
+    <section className="w-full border-y pt-12 pb-8 md:pt-24 lg:pt-32">
       <div className="space-y-10 px-4 md:px-6 xl:space-y-16">
         <div className="mx-auto grid max-w-[1300px] gap-4 px-4 sm:px-6 md:grid-cols-2 md:gap-16 md:px-10">
           <div>
             <h1 className="lg:leading-tighter text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl xl:text-[3.4rem] 2xl:text-[3.75rem]">
               {appName}
             </h1>
-            <p className="mx-auto mt-4 max-w-[700px] text-gray-500 dark:text-gray-400 md:text-xl">
+            <p className="mx-auto mt-4 max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
               {appDescription}
             </p>
           </div>

diff --git a/app/(marketing)/_components/header.tsx b/app/(marketing)/_components/header.tsx
@@ -4,7 +4,7 @@ import { Logo } from "@/components/logo"
 
 export function Header() {
   return (
-    <header className="sticky top-0 flex items-center bg-gray-100 py-4 opacity-90 dark:bg-gray-800 lg:px-6">
+    <header className="sticky top-0 flex items-center bg-gray-100 py-4 opacity-90 lg:px-6 dark:bg-gray-800">
       <div className="flex w-full items-center justify-between px-4 md:container md:px-0">
         <Link
           className="flex items-center justify-center"

diff --git a/app/(marketing)/_components/products.tsx b/app/(marketing)/_components/products.tsx
@@ -40,7 +40,7 @@ async function LoadProducts() {
               <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
                 Purchase
               </h2>
-              <p className="max-w-[900px] text-gray-500 dark:text-gray-400 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+              <p className="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
                 Copy here
               </p>
             </div>
@@ -66,7 +66,7 @@ async function LoadProducts() {
                         product.prices[0].unitAmount,
                         product.prices[0].currency
                       )}{" "}
-                      <span className="text-sm font-normal text-muted-foreground">
+                      <span className="text-muted-foreground text-sm font-normal">
                         /one time
                       </span>
                     </div>
@@ -120,8 +120,8 @@ async function LoadProducts() {
                         priceInterval={price.interval}
                       >
                         {(price.metadata as Metadata)["trialPeriodDays"] && (
-                          <div className="absolute right-0 top-0 size-[200px] overflow-hidden">
-                            <div className="absolute right-[-80px] top-[30px] w-[280px] rotate-45 bg-yellow-400 py-1 text-center text-xs font-bold text-yellow-900 shadow-md">
+                          <div className="absolute top-0 right-0 size-[200px] overflow-hidden">
+                            <div className="absolute top-[30px] right-[-80px] w-[280px] rotate-45 bg-yellow-400 py-1 text-center text-xs font-bold text-yellow-900 shadow-md">
                               <span className="block w-full pl-8">
                                 {
                                   (price.metadata as Metadata)[
@@ -153,7 +153,7 @@ async function LoadProducts() {
                         >
                           <div className="flex items-center gap-4 text-4xl font-bold">
                             {centsToCurrency(price.unitAmount, price.currency)}{" "}
-                            <span className="text-sm font-normal text-muted-foreground">
+                            <span className="text-muted-foreground text-sm font-normal">
                               /{price.interval}
                             </span>
                           </div>

diff --git a/app/(marketing)/_components/subscription-interval.tsx b/app/(marketing)/_components/subscription-interval.tsx
@@ -56,7 +56,7 @@ export function SubscriptionIntervalSwitch() {
     useSubscriptionInterval()
 
   return (
-    <div className="flex items-center rounded-full bg-muted p-1">
+    <div className="bg-muted flex items-center rounded-full p-1">
       <button
         type="button"
         className={`rounded-full px-4 py-2 transition-colors ${

diff --git a/app/(marketing)/checkout/thank-you/page.tsx b/app/(marketing)/checkout/thank-you/page.tsx
@@ -57,7 +57,7 @@ export default async function ThankYouPage(props: {
           </h2>
           <AuthBoundary
             alternate={
-              <p className="mx-auto max-w-[600px] text-sm text-gray-500 dark:text-gray-400 md:text-xl">
+              <p className="mx-auto max-w-[600px] text-sm text-gray-500 md:text-xl dark:text-gray-400">
                 You are minutes away from getting started with {appName}. An
                 email was sent to{" "}
                 <strong>
@@ -67,7 +67,7 @@ export default async function ThankYouPage(props: {
               </p>
             }
           >
-            <p className="mx-auto max-w-[600px] text-sm text-gray-500 dark:text-gray-400 md:text-xl">
+            <p className="mx-auto max-w-[600px] text-sm text-gray-500 md:text-xl dark:text-gray-400">
               <Button asChild>
                 <Link href="/account">Go to your account</Link>
               </Button>

diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
@@ -76,7 +76,7 @@ export default function RootLayout({
       <PostHogProvider>
         <body
           className={cn(
-            "min-h-screen bg-background font-sans antialiased",
+            "bg-background min-h-screen font-sans antialiased",
             fontSans.variable,
             chivo.variable
           )}