feat: upgrade tailwind to v4 (4) nsui components

This commit is contained in:
javayhu 2025-03-21 00:09:58 +08:00
parent 6a3be051e4
commit b2dd3d1694
8 changed files with 13 additions and 13 deletions

View File

@ -17,12 +17,12 @@ export default function CallToAction3() {
<p className="mt-4">Libero sapiente aliquam quibusdam aspernatur.</p>
<form action="" className="mx-auto mt-10 max-w-sm lg:mt-12">
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow-sm shadow-zinc-950/5 has-[input:focus]:ring-2">
<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
<input
placeholder="Your mail address"
className="h-14 w-full bg-transparent pl-12 focus:outline-none"
className="h-14 w-full bg-transparent pl-12 focus:outline-hidden"
type="email"
/>

View File

@ -63,7 +63,7 @@ export default function Content2() {
/>
<Image
src="/images/blocks/charts-light.png"
className="rounded-[12px] shadow dark:hidden"
className="rounded-[12px] shadow-sm dark:hidden"
alt="payments illustration light"
width={1207}
height={929}

View File

@ -24,7 +24,7 @@ export default function Content() {
/>
<Image
src="/images/blocks/payments-light.png"
className="rounded-[15px] shadow dark:hidden"
className="rounded-[15px] shadow-sm dark:hidden"
alt="payments illustration light"
width={1207}
height={929}

View File

@ -51,7 +51,7 @@ export default function Features5() {
/>
<Image
src="/images/blocks/payments-light.png"
className="rounded-[15px] shadow dark:hidden"
className="rounded-[15px] shadow-sm dark:hidden"
alt="payments illustration light"
width={1207}
height={929}

View File

@ -279,7 +279,7 @@ export default function Features8() {
<div className="before:bg-(--color-border) relative mt-6 before:absolute before:inset-0 before:mx-auto before:w-px sm:-my-6 sm:-mr-6">
<div className="relative flex h-full flex-col justify-center space-y-6 py-6">
<div className="relative flex w-[calc(50%+0.875rem)] items-center justify-end gap-2">
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-xs">
Likeur
</span>
<div className="ring-background size-7 ring-4">
@ -298,12 +298,12 @@ export default function Features8() {
alt=""
/>
</div>
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-xs">
M. Irung
</span>
</div>
<div className="relative flex w-[calc(50%+0.875rem)] items-center justify-end gap-2">
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-sm">
<span className="block h-fit rounded border px-2 py-1 text-xs shadow-xs">
B. Ng
</span>
<div className="ring-background size-7 ring-4">

View File

@ -48,12 +48,12 @@ export default function HeroSection2() {
action=""
className="mx-auto my-10 max-w-sm lg:my-12 lg:ml-0 lg:mr-auto"
>
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow shadow-zinc-950/5 has-[input:focus]:ring-2">
<div className="bg-background has-[input:focus]:ring-muted relative grid grid-cols-[1fr_auto] items-center rounded-[calc(var(--radius)+0.75rem)] border pr-3 shadow-sm shadow-zinc-950/5 has-[input:focus]:ring-2">
<Mail className="text-caption pointer-events-none absolute inset-y-0 left-5 my-auto size-5" />
<input
placeholder="Your mail address"
className="h-14 w-full bg-transparent pl-12 focus:outline-none"
className="h-14 w-full bg-transparent pl-12 focus:outline-hidden"
type="email"
/>

View File

@ -65,8 +65,8 @@ export default function HeroSection3() {
</div>
</div>
<div className="x-auto relative mx-auto mt-8 max-w-lg sm:mt-12">
<div className="absolute inset-0 -top-8 left-1/2 -z-20 h-56 w-full -translate-x-1/2 [background-image:linear-gradient(to_bottom,transparent_98%,theme(colors.gray.200/75%)_98%),linear-gradient(to_right,transparent_94%,_theme(colors.gray.200/75%)_94%)] [background-size:16px_35px] [mask:radial-gradient(black,transparent_95%)] dark:opacity-10"></div>
<div className="absolute inset-x-0 top-12 -z-[1] mx-auto h-1/3 w-2/3 rounded-full bg-blue-300 blur-3xl dark:bg-white/20"></div>
<div className="absolute inset-0 -top-8 left-1/2 -z-20 h-56 w-full -translate-x-1/2 [background-image:linear-gradient(to_bottom,transparent_98%,--theme(--color-gray-200/75%)_98%),linear-gradient(to_right,transparent_94%,--theme(--color-gray-200/75%)_94%)] [background-size:16px_35px] [mask:radial-gradient(black,transparent_95%)] dark:opacity-10"></div>
<div className="absolute inset-x-0 top-12 -z-1 mx-auto h-1/3 w-2/3 rounded-full bg-blue-300 blur-3xl dark:bg-white/20"></div>
<Swiper
slidesPerView={1}

View File

@ -65,7 +65,7 @@ export default function HeroSection() {
/>
<div
aria-hidden
className="from-background z-11 absolute inset-0 bg-gradient-to-l"
className="from-background z-11 absolute inset-0 bg-linear-to-l"
/>
<div
aria-hidden