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

tailwind4 beta

Author: collinschaafsma

.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"],

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}

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
       )}

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) {

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.

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.

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">

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 />}>

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 />}>

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 />}>