Skip to content

tailwind4 beta #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
collinschaafsma merged 2 commits into from
Jan 13, 2025
Merged

tailwind4 beta #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e66ba01
tailwind4 beta
collinschaafsma Jan 13, 2025
ba661b5
formatting
collinschaafsma Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 1 addition & 10 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
{
Expand All @@ -23,12 +20,6 @@
}
]
},
"settings": {
"tailwindcss": {
"callees": ["cn", "cva"],
"config": "tailwind.config.ts"
}
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
Expand Down
2 changes: 1 addition & 1 deletion app/(app)/_components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/_components/nav/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
Expand All @@ -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
)}
Expand Down
2 changes: 1 addition & 1 deletion app/(app)/account/_components/paginator-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export function PaginatorProvider<T extends GenericData>({
}

setHasMore(responseToPaginate?.hasMore || false)
}, [cursor])
}, [cursor, responseToPaginate])

const handleNextPage = () => {
if (responseToPaginate?.data.length) {
Expand Down
2 changes: 1 addition & 1 deletion app/(app)/account/_components/payment-method-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion app/(app)/account/_components/subscription-plan-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion app/(app)/account/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/dashboard/_components/customers-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 />}>
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/dashboard/_components/gross-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 />}>
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/dashboard/_components/mrr-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 />}>
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/dashboard/_components/newsletter-contacts-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 />}>
Expand Down
2 changes: 1 addition & 1 deletion app/(app)/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions app/(app)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
>
Expand All @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion app/(auth)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
>
Expand Down
10 changes: 5 additions & 5 deletions app/(auth)/sign-in/_components/sign-in-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions app/(marketing)/@comingSoon/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/(marketing)/_components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
10 changes: 5 additions & 5 deletions app/(marketing)/_components/products.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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)[
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/(marketing)/_components/subscription-interval.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ${
Expand Down
4 changes: 2 additions & 2 deletions app/(marketing)/checkout/thank-you/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/(marketing)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
Expand Down
Loading
Loading