📦 Upgrade tailwind and start using size utility (#989)

2025-06-05 04:02:21 +02:00 · 2024-01-19 14:43:09 +07:00 · 2024-01-19 14:43:09 +07:00 · d0b359afaf
commit d0b359afaf
parent 048c475cf7
80 changed files with 177 additions and 170 deletions
--- a/apps/landing/public/no.svg
+++ b/apps/landing/public/no.svg
@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#94a3b8">
+<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 20 20" fill="#94a3b8">
  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
 </svg>
--- a/apps/landing/public/yes.svg
+++ b/apps/landing/public/yes.svg
@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#22c55e">
+<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 20 20" fill="#22c55e">
  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
 </svg>
--- a/apps/landing/src/components/error-page.tsx
+++ b/apps/landing/src/components/error-page.tsx
@ -23,7 +23,7 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
      </Head>
      <div className="space-y-8">
        <div className="space-y-4 text-center">
-          <Icon className="mb-4 inline-block h-24 w-24 text-gray-400" />
+          <Icon className="mb-4 inline-block size-24 text-gray-400" />
          <div className="text-primary-600 mb-2 text-3xl font-bold ">
            {title}
          </div>
--- a/apps/landing/src/components/home/bonus.tsx
+++ b/apps/landing/src/components/home/bonus.tsx
@ -36,7 +36,7 @@ const Item = ({
        <span
          className={cn("bg-primary rounded-full p-2 text-gray-50", className)}
        >
-          <Icon className="h-4 w-4" />
+          <Icon className="size-4" />
        </span>
        <div className="text-sm font-semibold">{children}</div>
      </div>
--- a/apps/landing/src/components/home/hero.tsx
+++ b/apps/landing/src/components/home/hero.tsx
@ -38,8 +38,8 @@ const Screenshot = () => {
          defaults="Create a page like this in seconds!"
        />
        <span className="absolute left-1/2 top-full z-10 h-8 w-px -translate-x-1/2 bg-gray-800" />
-        <span className="absolute -bottom-12 left-1/2 z-10 inline-block h-3 w-3 origin-right -translate-x-1/2 rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
-        <span className="absolute -bottom-12 left-1/2 z-10 inline-block h-3 w-3 origin-right -translate-x-1/2 animate-ping rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
+        <span className="absolute -bottom-12 left-1/2 z-10 inline-block size-3 origin-right -translate-x-1/2 rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
+        <span className="absolute -bottom-12 left-1/2 z-10 inline-block size-3 origin-right -translate-x-1/2 animate-ping rounded-full bg-gray-800 ring-1 ring-gray-800 ring-offset-2" />
      </m.div>
      <m.div
        transition={{
@ -95,7 +95,7 @@ export const MarketingHero = ({
              i18nKey="home:selfHostingBlog"
              defaults="Rallly 3.0 Self-Hosting"
            />
-            <ChevronRightIcon className="-mr-1 h-4 w-4" aria-hidden="true" />
+            <ChevronRightIcon className="-mr-1 size-4" aria-hidden="true" />
          </span>
        </Link>
      </div>
@ -114,7 +114,7 @@ export const MarketingHero = ({
        >
          <Link href={linkToApp("/new")}>
            {callToAction}
-            <ChevronRightIcon className="-ml-1 h-5 w-5 transition-transform group-active:translate-x-1" />
+            <ChevronRightIcon className="-ml-1 size-5 transition-transform group-active:translate-x-1" />
          </Link>
        </Button>
        <div className="whitespace-nowrap text-center text-sm font-medium text-gray-500">
--- a/apps/landing/src/components/layouts/blog-layout.tsx
+++ b/apps/landing/src/components/layouts/blog-layout.tsx
@ -11,7 +11,7 @@ export const BlogLayout = ({ children }: React.PropsWithChildren) => {
      <div className="mt-16 overflow-hidden rounded-md border bg-gray-200/50 backdrop-blur-sm">
        <div className="flex flex-col gap-x-4 gap-y-2 p-6  pb-0 sm:flex-row">
          <div>
-            <NewspaperIcon className="h-6 w-6" />
+            <NewspaperIcon className="size-6" />
          </div>
          <div>
            <div className="font-medium">Want to stay up to date?</div>
--- a/apps/landing/src/components/layouts/page-layout.tsx
+++ b/apps/landing/src/components/layouts/page-layout.tsx
@ -108,12 +108,12 @@ const PageLayout: React.FunctionComponent<PageLayoutProps> = ({ children }) => {
              <span>
                <Trans i18nKey="goToApp" defaults="Go to app" />
              </span>
-              <ChevronRightIcon className="inline-block h-4 w-4 transition-all group-active:translate-x-1" />
+              <ChevronRightIcon className="inline-block size-4 transition-all group-active:translate-x-1" />
            </Link>
            <div className="flex items-center justify-center lg:hidden">
              <DropdownMenu>
                <DropdownMenuTrigger>
-                  <MenuIcon className="h-6 w-6" />
+                  <MenuIcon className="size-6" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" sideOffset={16}>
                  <DropdownMenuItem asChild>
--- a/apps/landing/src/components/layouts/page-layout/footer.tsx
+++ b/apps/landing/src/components/layouts/page-layout/footer.tsx
@ -95,28 +95,28 @@ const Footer: React.FunctionComponent = () => {
              href="https://twitter.com/ralllyco"
              className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
            >
-              <TwitterIcon className="h-5 w-5" />
+              <TwitterIcon className="size-5" />
            </Link>
            <Link
              target="_blank"
              href="https://discord.gg/uzg4ZcHbuM"
              className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
            >
-              <DiscordIcon className="h-5 w-5" />
+              <DiscordIcon className="size-5" />
            </Link>
            <Link
              target="_blank"
              href="https://www.linkedin.com/company/rallly"
              className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
            >
-              <LinkedinIcon className="h-5 w-5" />
+              <LinkedinIcon className="size-5" />
            </Link>
            <Link
              target="_blank"
              href="https://github.com/lukevella/rallly"
              className="hover:text-primary-600 text-sm text-gray-500 hover:no-underline"
            >
-              <GithubIcon className="h-5 w-5" />
+              <GithubIcon className="size-5" />
            </Link>
          </div>
        </div>
@ -219,7 +219,7 @@ const Footer: React.FunctionComponent = () => {
            href="https://support.rallly.co/contribute/translations"
            className="hover:border-primary-600 hover:text-primary-600 inline-flex items-center rounded-md border px-3 py-2 text-xs text-gray-500"
          >
-            <LanguagesIcon className="mr-2 h-5 w-5" />
+            <LanguagesIcon className="mr-2 size-5" />
            <Trans i18nKey="volunteerTranslator" /> &rarr;
          </Link>
        </div>
--- a/apps/landing/src/components/marketing.tsx
+++ b/apps/landing/src/components/marketing.tsx
@ -104,7 +104,7 @@ import { Trans } from "@/components/trans";
 //             href="https://www.trustpilot.com/evaluate/rallly.co"
 //           >
 //             <span>Share your experience</span>
-//             <ArrowRight className="h-4 w-4" />
+//             <ArrowRight className="size-4" />
 //           </Link>
 //         </Button>
 //       </div> */}
@ -119,7 +119,7 @@ import { Trans } from "@/components/trans";
 // }: React.PropsWithChildren<{ author: string; logo?: string }>) => {
 //   return (
 //     <div className="relative flex flex-col space-y-4 rounded-md bg-gray-50 px-4 py-3 shadow-sm">
-//       <QuoteIcon className="h-4 w-4 text-gray-400" />
+//       <QuoteIcon className="size-4 text-gray-400" />
 //       <div className="flex justify-between">
 //         <div className="flex flex-col gap-2">
 //           <div className="font-semibold">{author}</div>
@ -131,7 +131,7 @@ import { Trans } from "@/components/trans";
 //           />
 //         </div>
 //         {logo ? (
-//           <div className="relative h-16 w-16">
+//           <div className="relative size-16">
 //             <Image src={logo} fill alt="logo" />
 //           </div>
 //         ) : null}
@ -289,7 +289,7 @@ const BigTestimonial = () => {
            href="https://www.trustpilot.com/reviews/645e1d1976733924e89d8203"
          >
            <Trans i18nKey="home:viaTrustpilot" defaults="via Trustpilot" />
-            <ArrowUpRight className="ml-1 inline h-3 w-3" />
+            <ArrowUpRight className="ml-1 inline size-3" />
          </Link>
        </p>
      </div>
--- a/apps/landing/src/pages/blog/[slug].tsx
+++ b/apps/landing/src/pages/blog/[slug].tsx
@ -56,7 +56,7 @@ const Page: NextPageWithLayout<Props> = ({ post }) => {
          className="text-muted-foreground hover:text-primary inline-flex items-center gap-x-2 text-sm font-medium"
          href="/blog"
        >
-          <ArrowLeftIcon className="h-4 w-4" /> All Posts
+          <ArrowLeftIcon className="size-4" /> All Posts
        </Link>
      </nav>
      <article>
--- a/apps/landing/src/pages/pricing.tsx
+++ b/apps/landing/src/pages/pricing.tsx
@ -278,7 +278,7 @@ const Page: NextPageWithLayout = () => {
        <PriceTables />
        <div className="rounded-md border bg-gradient-to-b from-cyan-50 to-cyan-50/60 px-5 py-4 text-cyan-800">
          <div className="mb-2">
-            <TrendingUpIcon className="text-indigo mr-2 mt-0.5 h-6 w-6 shrink-0" />
+            <TrendingUpIcon className="text-indigo mr-2 mt-0.5 size-6 shrink-0" />
          </div>
          <div className="mb-1 flex items-center gap-x-2">
            <h3 className="text-sm">
--- a/apps/landing/src/style.css
+++ b/apps/landing/src/style.css
@ -69,7 +69,7 @@
    @apply focus:ring-rose-500;
  }
  .checkbox {
-    @apply text-primary-600 focus:ring-primary-600 h-4 w-4 rounded border-gray-300 shadow-sm;
+    @apply text-primary-600 focus:ring-primary-600 size-4 rounded border-gray-300 shadow-sm;
  }
  .btn {
    @apply inline-flex h-9 select-none items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border px-2.5 text-sm font-medium;
--- a/apps/web/src/app/[locale]/(admin)/layout.tsx
+++ b/apps/web/src/app/[locale]/(admin)/layout.tsx
@ -40,7 +40,7 @@ function MobileNavigation() {
        </Link>
        <Button asChild variant="ghost">
          <Link href="/menu">
-            <MenuIcon className="text-muted-foreground h-4 w-4" />
+            <MenuIcon className="text-muted-foreground size-4" />
          </Link>
        </Button>
      </div>
--- a/apps/web/src/app/[locale]/(admin)/menu-item.tsx
+++ b/apps/web/src/app/[locale]/(admin)/menu-item.tsx
@ -32,7 +32,7 @@ export function MenuItem({
          isCurrent
            ? "text-indigo-600"
            : "text-gray-400 group-hover:text-indigo-600",
-          "h-5 w-5 shrink-0",
+          "size-5 shrink-0",
        )}
        aria-hidden="true"
      />
--- a/apps/web/src/app/[locale]/(admin)/polls/layout.tsx
+++ b/apps/web/src/app/[locale]/(admin)/polls/layout.tsx
@ -28,7 +28,7 @@ export default async function Layout({
          </PageTitle>
          <Button asChild>
            <Link href="/new">
-              <PenBoxIcon className="text-muted-foreground h-4 w-4" />
+              <PenBoxIcon className="text-muted-foreground size-4" />
              <span className="hidden sm:inline">
                <Trans t={t} i18nKey="newPoll" />
              </span>
--- a/apps/web/src/app/[locale]/(admin)/polls/polls-list.tsx
+++ b/apps/web/src/app/[locale]/(admin)/polls/polls-list.tsx
@ -22,7 +22,7 @@ const EmptyState = () => {
    <div className="py-24">
      <div className="mx-auto w-full max-w-md rounded-md border-2 border-dashed border-gray-300 p-8 text-center">
        <div className="mb-4">
-          <InboxIcon className="inline-block h-10 w-10 text-gray-400" />
+          <InboxIcon className="inline-block size-10 text-gray-400" />
        </div>
        <h3 className="font-semibold">
          <Trans i18nKey="noPolls" defaults="No polls" />
@ -36,7 +36,7 @@ const EmptyState = () => {
        <div className="mt-6">
          <Button variant="primary" asChild={true}>
            <Link href="/new">
-              <PlusIcon className="h-5 w-5" />
+              <PlusIcon className="size-5" />
              <Trans defaults="New Poll" i18nKey="newPoll" />
            </Link>
          </Button>
@ -88,7 +88,7 @@ export function PollsList() {
                <h3 className="truncate font-semibold text-gray-600 group-hover:text-gray-900">
                  {row.original.title}
                </h3>
-                <ArrowRightIcon className="h-4 w-4 opacity-0 transition-all group-hover:opacity-100 group-focus:translate-x-2" />
+                <ArrowRightIcon className="size-4 opacity-0 transition-all group-hover:opacity-100 group-focus:translate-x-2" />
              </div>
              {row.original.event ? (
                <p className="text-muted-foreground text-sm">
@ -151,7 +151,7 @@ export function PollsList() {
          return (
            <Tooltip delayDuration={100}>
              <TooltipTrigger className="text-muted-foreground flex items-center gap-x-2">
-                <UsersIcon className="h-4 w-4" />
+                <UsersIcon className="size-4" />
                <span className="text-sm">
                  {row.original.participants.length}
                </span>
--- a/apps/web/src/app/[locale]/(admin)/settings/billing/billing-page.tsx
+++ b/apps/web/src/app/[locale]/(admin)/settings/billing/billing-page.tsx
@ -43,11 +43,11 @@ const BillingPortal = () => {
              window.location.pathname,
            )}`}
          >
-            <CreditCardIcon className="h-4 w-4" />
+            <CreditCardIcon className="size-4" />
            <span>
              <Trans i18nKey="billingPortal" defaults="Billing Portal" />
            </span>
-            <ArrowUpRight className="h-4 w-4" />
+            <ArrowUpRight className="size-4" />
          </Link>
        </Button>
      </div>
@ -183,7 +183,7 @@ const LegacyBilling = () => {
              }}
            >
              <Link href={userPaymentData.updateUrl}>
-                <CreditCardIcon className="h-4 w-4" />
+                <CreditCardIcon className="size-4" />
                <Trans
                  i18nKey="subscriptionUpdatePayment"
                  defaults="Update Payment Details"
@ -226,7 +226,7 @@ const LegacyBilling = () => {
    </p>
    <Button asChild>
      <Link href="mailto:support@rallly.co">
-        <SendIcon className="h-4 w-4" />
+        <SendIcon className="size-4" />
        <Trans i18nKey="contactSupport" defaults="Contact Support" />
      </Link>
    </Button>
@ -272,7 +272,7 @@ export function BillingPage() {
            </p>
            <Button asChild>
              <Link href="mailto:support@rallly.co">
-                <SendIcon className="h-4 w-4" />
+                <SendIcon className="size-4" />
                <Trans i18nKey="contactSupport" defaults="Contact Support" />
              </Link>
            </Button>
--- a/apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx
+++ b/apps/web/src/app/[locale]/(admin)/settings/menu-item.tsx
@ -69,7 +69,7 @@ export function SettingsMenu() {
      <div className="mb-4 hidden divide-x overflow-hidden rounded-md border bg-gray-50 shadow-sm lg:inline-flex">
        {menuItems.map((item, i) => (
          <MenuItem key={i} href={item.href}>
-            <item.icon className="h-4 w-4" />
+            <item.icon className="size-4" />
            {item.title}
          </MenuItem>
        ))}
@ -90,7 +90,7 @@ export function SettingsMenu() {
          {menuItems.map((item, i) => (
            <SelectItem key={i} value={item.title}>
              <div className="flex items-center gap-x-2.5">
-                <item.icon className="text-muted-foreground h-4 w-4" />
+                <item.icon className="text-muted-foreground size-4" />
                <span className="font-medium">{item.title}</span>
              </div>
            </SelectItem>
--- a/apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx
+++ b/apps/web/src/app/[locale]/(admin)/settings/profile/profile-page.tsx
@ -57,7 +57,7 @@ export const ProfilePage = () => {
              </AlertDescription>
            </Alert>
            <LogoutButton className="mt-6" variant="destructive">
-              <UserXIcon className="h-4 w-4" />
+              <UserXIcon className="size-4" />
              <Trans i18nKey="forgetMe" />
            </LogoutButton>
          </SettingsSection>
@ -87,7 +87,7 @@ export const ProfilePage = () => {
            }
          >
            <LogoutButton>
-              <LogOutIcon className="h-4 w-4" />
+              <LogOutIcon className="size-4" />
              <Trans i18nKey="logout" defaults="Logout" />
            </LogoutButton>
          </SettingsSection>
--- a/apps/web/src/app/[locale]/(admin)/sidebar.tsx
+++ b/apps/web/src/app/[locale]/(admin)/sidebar.tsx
@ -47,7 +47,7 @@ function NavItem({
      <Icon
        className={cn(
          current ? "text-gray-500" : "text-gray-400 group-hover:text-gray-500",
-          "h-5 w-5 shrink-0",
+          "size-5 shrink-0",
        )}
        aria-hidden="true"
      />
@ -105,7 +105,7 @@ export function Sidebar() {
                  className="mb-4 grid rounded-md border border-gray-200 bg-gray-50 px-4 py-3 hover:border-gray-300 hover:bg-gray-200 active:bg-gray-300"
                >
                  <span className="mb-2 flex items-center gap-x-2">
-                    <SparklesIcon className="h-5 w-5 text-gray-400" />
+                    <SparklesIcon className="size-5 text-gray-400" />
                    <span className="text-sm font-bold">
                      <Trans i18nKey="upgrade" />
                    </span>
@ -149,7 +149,7 @@ export function Sidebar() {
                      {user.email}
                    </span>
                  </span>
-                  <ChevronRightIcon className="text-muted-foreground h-4 w-4 opacity-0 group-hover:opacity-100" />
+                  <ChevronRightIcon className="text-muted-foreground size-4 opacity-0 group-hover:opacity-100" />
                </Link>
              </Button>
            </li>
--- a/apps/web/src/app/[locale]/(auth)/login/login-form.tsx
+++ b/apps/web/src/app/[locale]/(auth)/login/login-form.tsx
@ -134,7 +134,7 @@ export function LoginForm({ oidcConfig }: { oidcConfig?: { name: string } }) {
              <IfCloudHosted>
                <Button size="lg" asChild>
                  <Link href={callbackUrl}>
-                    <UserIcon className="h-4 w-4" />
+                    <UserIcon className="size-4" />
                    <Trans i18nKey="continueAsGuest" />
                  </Link>
                </Button>
--- a/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/invite-page.tsx
@ -73,7 +73,7 @@ const GoToApp = () => {
            className={poll.userId !== user.id ? "hidden" : ""}
          >
            <Link href={`/poll/${poll.id}`}>
-              <ArrowUpLeftIcon className="text-muted-foreground h-4 w-4" />
+              <ArrowUpLeftIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="manage" />
            </Link>
          </Button>
--- a/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
+++ b/apps/web/src/app/[locale]/invite/[urlId]/nav.tsx
@ -23,7 +23,7 @@ export const Nav = () => {
            className={poll.userId !== user.id ? "hidden" : ""}
          >
            <Link href={`/poll/${poll.id}`}>
-              <ArrowUpLeftIcon className="text-muted-foreground h-4 w-4" />
+              <ArrowUpLeftIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="manage" />
            </Link>
          </Button>
--- a/apps/web/src/app/[locale]/menu/back-button.tsx
+++ b/apps/web/src/app/[locale]/menu/back-button.tsx
@ -13,7 +13,7 @@ export function BackButton() {
        router.back();
      }}
    >
-      <XIcon className="text-muted-foreground h-4 w-4" />
+      <XIcon className="text-muted-foreground size-4" />
    </Button>
  );
 }
--- a/apps/web/src/app/[locale]/not-found.tsx
+++ b/apps/web/src/app/[locale]/not-found.tsx
@ -13,7 +13,7 @@ export default async function Page() {
    <div className="flex h-[calc(100vh-100px)] w-full items-center justify-center">
      <div className="space-y-8">
        <div className="space-y-4 text-center">
-          <FileSearchIcon className="mb-4 inline-block h-24 w-24 text-gray-400" />
+          <FileSearchIcon className="mb-4 inline-block size-24 text-gray-400" />
          <div className="text-primary-600 mb-2 text-3xl font-bold ">
            {t("errors_notFoundTitle")}
          </div>
--- a/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
+++ b/apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx
@ -5,7 +5,7 @@ export default function Loading() {
  return (
    <PageContainer>
      <PageHeader className="flex items-center gap-x-4">
-        <Skeleton className="h-9 w-9" />
+        <Skeleton className="size-9" />
        <Skeleton className="h-5 w-48" />
      </PageHeader>
    </PageContainer>
--- a/apps/web/src/components/billing/billing-plans.tsx
+++ b/apps/web/src/components/billing/billing-plans.tsx
@ -129,7 +129,7 @@ export const BillingPlans = () => {
      </Tabs>
      <div className="rounded-md border border-cyan-200 bg-cyan-50 px-4 py-3 text-cyan-800">
        <div className="mb-2">
-          <TrendingUpIcon className="text-indigo mr-2 mt-0.5 h-6 w-6 shrink-0" />
+          <TrendingUpIcon className="text-indigo mr-2 mt-0.5 size-6 shrink-0" />
        </div>
        <div className="mb-2 flex items-center gap-x-2">
          <h3 className="text-sm font-semibold">
--- a/apps/web/src/components/button.tsx
+++ b/apps/web/src/components/button.tsx
@ -44,9 +44,7 @@ export const LegacyButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
        role="button"
        disabled={disabled}
      >
-        {icon
-          ? React.cloneElement(icon, { className: "h-5 w-5 mr-1.5" })
-          : null}
+        {icon ? React.cloneElement(icon, { className: "size-5 mr-1.5" }) : null}
        {children}
      </NewButton>
    );
--- a/apps/web/src/components/clock.tsx
+++ b/apps/web/src/components/clock.tsx
@ -84,7 +84,7 @@ export const TimesShownIn = () => {
  return (
    <ClockPreferences>
      <button className="inline-flex items-center gap-x-2 text-sm hover:underline">
-        <GlobeIcon className="h-4 w-4" />
+        <GlobeIcon className="size-4" />
        <Trans i18nKey="timeShownIn" values={{ timeZone: timeZoneName }} />
      </button>
    </ClockPreferences>
--- a/apps/web/src/components/compact-button.tsx
+++ b/apps/web/src/components/compact-button.tsx
@ -15,10 +15,10 @@ const CompactButton = React.forwardRef<HTMLButtonElement, CompactButtonProps>(
      <button
        ref={ref}
        type="button"
-        className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition-colors hover:bg-gray-200 active:bg-gray-300 active:text-gray-500"
+        className="inline-flex size-5 items-center justify-center rounded-full bg-gray-100 text-gray-500 transition-colors hover:bg-gray-200 active:bg-gray-300 active:text-gray-500"
        onClick={onClick}
      >
-        {Icon ? <Icon className="h-3 w-3" /> : children}
+        {Icon ? <Icon className="size-3" /> : children}
      </button>
    );
  },
--- a/apps/web/src/components/date-card.tsx
+++ b/apps/web/src/components/date-card.tsx
@ -19,7 +19,7 @@ const DateCard: React.FunctionComponent<DateCardProps> = ({
  return (
    <div
      className={clsx(
-        "relative inline-flex h-14 w-14 items-center justify-center rounded-md border border-gray-200 bg-white p-1 text-center",
+        "relative inline-flex size-14 items-center justify-center rounded-md border border-gray-200 bg-white p-1 text-center",
        className,
      )}
    >
--- a/apps/web/src/components/date-icon.tsx
+++ b/apps/web/src/components/date-icon.tsx
@ -10,7 +10,7 @@ export const DateIconInner = (props: {
  return (
    <div
      className={clsx(
-        "inline-flex h-12 w-12 flex-col overflow-hidden rounded-md border bg-gray-50 text-center text-slate-800",
+        "inline-flex size-12 flex-col overflow-hidden rounded-md border bg-gray-50 text-center text-slate-800",
        props.className,
      )}
    >
--- a/apps/web/src/components/discussion/discussion.tsx
+++ b/apps/web/src/components/discussion/discussion.tsx
@ -88,7 +88,7 @@ const Discussion: React.FunctionComponent = () => {
  return (
    <div className="divide-y">
      <div className="flex items-center gap-2 bg-gray-50 px-4 py-3 font-semibold">
-        <MessageCircleIcon className="h-5 w-5" /> {t("comments")} (
+        <MessageCircleIcon className="size-5" /> {t("comments")} (
        {comments.length})
      </div>
      {comments.length ? (
@ -114,7 +114,7 @@ const Discussion: React.FunctionComponent = () => {
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild={true}>
                            <button className="hover:text-foreground text-gray-500">
-                              <MoreHorizontalIcon className="h-4 w-4" />
+                              <MoreHorizontalIcon className="size-4" />
                            </button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="start">
@ -125,7 +125,7 @@ const Discussion: React.FunctionComponent = () => {
                                });
                              }}
                            >
-                              <TrashIcon className="mr-2 h-4 w-4" />
+                              <TrashIcon className="mr-2 size-4" />
                              <Trans i18nKey="delete" />
                            </DropdownMenuItem>
                          </DropdownMenuContent>
--- a/apps/web/src/components/error-page.tsx
+++ b/apps/web/src/components/error-page.tsx
@ -20,7 +20,7 @@ const ErrorPage: React.FunctionComponent<ComponentProps> = ({
    <div className="flex h-[calc(100vh-100px)] w-full items-center justify-center">
      <div className="space-y-8">
        <div className="space-y-4 text-center">
-          <Icon className="mb-4 inline-block h-24 w-24 text-gray-400" />
+          <Icon className="mb-4 inline-block size-24 text-gray-400" />
          <div className="text-primary-600 mb-2 text-3xl font-bold ">
            {title}
          </div>
--- a/apps/web/src/components/event-card.tsx
+++ b/apps/web/src/components/event-card.tsx
@ -105,7 +105,7 @@ export const EventCard = () => {
      <div className="space-y-4 p-4 sm:px-6">
        {poll.description ? (
          <div className="flex gap-4">
-            <TextIcon className="text-muted-foreground h-4 w-4 shrink-0 translate-y-1" />
+            <TextIcon className="text-muted-foreground size-4 shrink-0 translate-y-1" />
            <div className="whitespace-pre-line">
              <TruncatedLinkify>{poll.description}</TruncatedLinkify>
            </div>
@ -113,12 +113,12 @@ export const EventCard = () => {
        ) : null}
        {poll.location ? (
          <div className="flex gap-4">
-            <MapPinIcon className="text-muted-foreground h-4 w-4 translate-y-1" />
+            <MapPinIcon className="text-muted-foreground size-4 translate-y-1" />
            <TruncatedLinkify>{poll.location}</TruncatedLinkify>
          </div>
        ) : null}
        <div className="flex gap-4">
-          <MousePointerClickIcon className="text-muted-foreground h-4 w-4 shrink-0 translate-y-0.5" />
+          <MousePointerClickIcon className="text-muted-foreground size-4 shrink-0 translate-y-0.5" />
          <div>
            <div className="flex gap-2.5">
              <span className="inline-flex items-center space-x-1">
--- a/apps/web/src/components/featurebase.tsx
+++ b/apps/web/src/components/featurebase.tsx
@ -47,7 +47,7 @@ export const FeaturebaseChangelog = ({ className }: { className?: string }) => {
            variant="ghost"
            data-featurebase-changelog
          >
-            <HelpCircleIcon className="h-4 w-4" />
+            <HelpCircleIcon className="size-4" />
            <span
              id="fb-update-badge"
              className="bg-primary rounded-full px-2 py-px text-xs text-gray-100 empty:hidden"
--- a/apps/web/src/components/feedback.tsx
+++ b/apps/web/src/components/feedback.tsx
@ -19,7 +19,7 @@ import { Trans } from "next-i18next";
 const FeedbackButton = () => {
  return (
    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger className="shadow-huge fixed bottom-8 right-6 z-20 hidden h-12 w-12 items-center justify-center rounded-full bg-gray-800 hover:bg-gray-700 active:shadow-none sm:inline-flex">
+      <DropdownMenuTrigger className="shadow-huge fixed bottom-8 right-6 z-20 hidden size-12 items-center justify-center rounded-full bg-gray-800 hover:bg-gray-700 active:shadow-none sm:inline-flex">
        <MegaphoneIcon className="h-5 text-white" />
      </DropdownMenuTrigger>
      <DropdownMenuContent sideOffset={10} align="end">
@ -32,7 +32,7 @@ const FeedbackButton = () => {
            href={`https://feedback.rallly.co/?b=feedback`}
            target={"_blank"}
          >
-            <SmileIcon className="mr-2 h-4 w-4" />
+            <SmileIcon className="mr-2 size-4" />
            <Trans i18nKey="sendFeedback" defaults="Send Feedback" />
          </Link>
        </DropdownMenuItem>
@ -41,7 +41,7 @@ const FeedbackButton = () => {
            href={`https://feedback.rallly.co/?b=feature-request`}
            target={"_blank"}
          >
-            <LightbulbIcon className="mr-2 h-4 w-4" />
+            <LightbulbIcon className="mr-2 size-4" />
            <Trans i18nKey={"featureRequest"} defaults={"Request a Feature"} />
          </Link>
        </DropdownMenuItem>
@ -50,14 +50,14 @@ const FeedbackButton = () => {
            href={`https://feedback.rallly.co/?b=bug-reports`}
            target={"_blank"}
          >
-            <BugIcon className="mr-2 h-4 w-4" />
+            <BugIcon className="mr-2 size-4" />
            <Trans i18nKey={"bugReport"} defaults={"Report an Issue"} />
          </Link>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild>
          <Link href={`https://support.rallly.co`} target={"_blank"}>
-            <LifeBuoyIcon className="mr-2 h-4 w-4" />
+            <LifeBuoyIcon className="mr-2 size-4" />
            <Trans i18nKey={"getSupport"} defaults={"Get Support"} />
          </Link>
        </DropdownMenuItem>
--- a/apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/date-navigation-toolbar.tsx
@ -24,11 +24,11 @@ const DateNavigationToolbar: React.FunctionComponent<
      <div className="flex items-center space-x-2">
        <div className="flex items-center gap-x-2">
          <Button type="button" onClick={onPrevious}>
-            <ChevronLeftIcon className="h-4 w-4" />
+            <ChevronLeftIcon className="size-4" />
          </Button>
          <Button onClick={onToday}>{t("today")}</Button>
          <Button onClick={onNext}>
-            <ChevronRightIcon className="h-4 w-4" />
+            <ChevronRightIcon className="size-4" />
          </Button>
        </div>
      </div>
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
@ -422,7 +422,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                                  onChange(newOptions);
                                }}
                              >
-                                <SparklesIcon className="mr-2 h-4 w-4" />
+                                <SparklesIcon className="mr-2 size-4" />
                                <Trans i18nKey="applyToAllDates" />
                              </DropdownMenuItem>
                              <DropdownMenuItem
@ -435,7 +435,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                                  );
                                }}
                              >
-                                <XIcon className="mr-2 h-4 w-4" />
+                                <XIcon className="mr-2 size-4" />
                                <Trans i18nKey="deleteDate" />
                              </DropdownMenuItem>
                            </DropdownMenuContent>
@ -474,7 +474,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
          ) : (
            <div className="flex h-full items-center justify-center py-12">
              <div className="text-center font-medium text-gray-400">
-                <CalendarIcon className="mb-2 inline-block h-12 w-12" />
+                <CalendarIcon className="mb-2 inline-block size-12" />
                <div>{t("noDatesSelected")}</div>
              </div>
            </div>
--- a/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
+++ b/apps/web/src/components/forms/poll-options-form/month-calendar/time-picker.tsx
@ -87,7 +87,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
            <Listbox.Button className="btn-default text-left">
              <span className="grow truncate">{dayjs(value).format("LT")}</span>
              <span className="pointer-events-none ml-2 flex">
-                <ChevronDownIcon className="h-5 w-5" />
+                <ChevronDownIcon className="size-5" />
              </span>
            </Listbox.Button>
          </div>
--- a/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
+++ b/apps/web/src/components/forms/poll-options-form/poll-options-form.tsx
@ -117,11 +117,11 @@ const PollOptionsForm = ({ children }: React.PropsWithChildren) => {
                <Tabs value={field.value} onValueChange={field.onChange}>
                  <TabsList className="w-full">
                    <TabsTrigger className="grow" value="month">
-                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      <CalendarIcon className="size-4 mr-2" />
                      <Trans i18nKey="monthView" />
                    </TabsTrigger>
                    <TabsTrigger className="grow" value="week">
-                      <TableIcon className="mr-2 h-4 w-4" />
+                      <TableIcon className="size-4 mr-2" />
                      <Trans i18nKey="weekView" />
                    </TabsTrigger>
                  </TabsList>
--- a/apps/web/src/components/forms/poll-options-form/week-calendar.tsx
+++ b/apps/web/src/components/forms/poll-options-form/week-calendar.tsx
@ -102,7 +102,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
                }}
              >
                <div className="absolute right-1.5 top-1.5 flex justify-end opacity-0 group-hover:opacity-100">
-                  <XIcon className="h-3 w-3" />
+                  <XIcon className="size-3" />
                </div>
                <div>
                  <div className="font-semibold">{start.format("LT")}</div>
--- a/apps/web/src/components/forms/poll-settings.tsx
+++ b/apps/web/src/components/forms/poll-settings.tsx
@ -50,7 +50,7 @@ const SettingTitle = ({
      {hint ? (
        <Tooltip>
          <TooltipTrigger>
-            <InfoIcon className="text-muted-foreground h-4 w-4" />
+            <InfoIcon className="text-muted-foreground size-4" />
          </TooltipTrigger>
          <TooltipContent>{hint}</TooltipContent>
        </Tooltip>
@ -111,7 +111,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
            name="disableComments"
            render={({ field }) => (
              <Setting>
-                <MessageCircleIcon className="h-5 w-5 shrink-0 translate-y-0.5" />
+                <MessageCircleIcon className="size-5 shrink-0 translate-y-0.5" />
                <SettingContent>
                  <SettingTitle htmlFor="disableComments">
                    <Trans i18nKey="disableComments">Disable Comments</Trans>
@ -132,7 +132,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
            name="requireParticipantEmail"
            render={({ field }) => (
              <Setting disabled={isFree}>
-                <AtSignIcon className="h-5 w-5 shrink-0 translate-y-0.5" />
+                <AtSignIcon className="size-5 shrink-0 translate-y-0.5" />
                <SettingContent>
                  <SettingTitle pro>
                    <Trans
@ -156,7 +156,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
            name="hideParticipants"
            render={({ field }) => (
              <Setting disabled={isFree}>
-                <EyeIcon className="h-5 w-5 shrink-0 translate-y-0.5" />
+                <EyeIcon className="size-5 shrink-0 translate-y-0.5" />
                <SettingContent>
                  <SettingTitle pro>
                    <Trans
@ -180,7 +180,7 @@ export const PollSettingsForm = ({ children }: React.PropsWithChildren) => {
            name="hideScores"
            render={({ field }) => (
              <Setting disabled={isFree}>
-                <VoteIcon className="h-5 w-5 shrink-0 translate-y-0.5" />
+                <VoteIcon className="size-5 shrink-0 translate-y-0.5" />
                <SettingContent>
                  <SettingTitle htmlFor={field.name} pro>
                    <Trans
--- a/apps/web/src/components/invite-dialog.tsx
+++ b/apps/web/src/components/invite-dialog.tsx
@ -64,7 +64,7 @@ export const InviteDialog = () => {
        className="bg-gradient-to-b from-gray-100 via-white to-white sm:max-w-md"
      >
        <div className="flex">
-          <Share2Icon className="text-primary h-6 w-6" />
+          <Share2Icon className="text-primary size-6" />
        </div>
        <DialogHeader className="">
          <DialogTitle>
@ -86,7 +86,7 @@ export const InviteDialog = () => {
            <div className="shrink-0">
              <Button asChild>
                <Link target="_blank" href={`/invite/${poll.id}`}>
-                  <ArrowUpRightIcon className="h-4 w-4" />
+                  <ArrowUpRightIcon className="size-4" />
                </Link>
              </Button>
            </div>
--- a/apps/web/src/components/layouts/poll-layout.tsx
+++ b/apps/web/src/components/layouts/poll-layout.tsx
@ -108,7 +108,7 @@ const StatusControl = () => {
        <DropdownMenuTrigger asChild>
          <Button>
            <PollStatusLabel status={poll.status} />
-            <ChevronDownIcon className="h-4 w-4" />
+            <ChevronDownIcon className="size-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
@ -173,13 +173,13 @@ const Layout = ({ children }: React.PropsWithChildren) => {
            {pathname === pollLink ? (
              <Button asChild>
                <Link href="/polls">
-                  <ListIcon className="h-4 w-4" />
+                  <ListIcon className="size-4" />
                </Link>
              </Button>
            ) : (
              <Button asChild>
                <Link href={pollLink}>
-                  <ArrowLeftIcon className="h-4 w-4" />
+                  <ArrowLeftIcon className="size-4" />
                </Link>
              </Button>
            )}
@ -226,20 +226,20 @@ export const PermissionGuard = ({ children }: React.PropsWithChildren) => {
          {user.isGuest ? (
            <Button asChild variant="primary">
              <LoginLink>
-                <LogInIcon className="-ml-1 h-4 w-4" />
+                <LogInIcon className="size-4 -ml-1" />
                <Trans i18nKey="login" defaults="Login" />
              </LoginLink>
            </Button>
          ) : (
            <LogoutButton>
-              <LogOutIcon className="-ml-1 h-4 w-4" />
+              <LogOutIcon className="size-4 -ml-1" />
              <Trans i18nKey="loginDifferent" defaults="Switch user" />
            </LogoutButton>
          )}
          <Button asChild>
            <Link href={`/invite/${poll.id}`}>
              <Trans i18nKey="goToInvite" defaults="Go to Invite Page" />
-              <ArrowUpRight className="h-4 w-4" />
+              <ArrowUpRight className="size-4" />
            </Link>
          </Button>
        </PageDialogFooter>
--- a/apps/web/src/components/modal/modal.tsx
+++ b/apps/web/src/components/modal/modal.tsx
@ -72,7 +72,7 @@ const Modal: React.FunctionComponent<ModalProps> = ({
                {showClose ? (
                  <button
                    role="button"
-                    className="absolute right-2 top-2 z-10 inline-flex h-7 w-7 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-500/10 hover:text-gray-500 focus:ring-0 focus:ring-offset-0 active:bg-gray-500/20"
+                    className="absolute right-2 top-2 z-10 inline-flex size-7 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-500/10 hover:text-gray-500 focus:ring-0 focus:ring-offset-0 active:bg-gray-500/20"
                    onClick={onCancel}
                  >
                    <XIcon className="h-4" />
--- a/apps/web/src/components/page-dialog.tsx
+++ b/apps/web/src/components/page-dialog.tsx
@ -8,7 +8,7 @@ export const PageDialog = (
    <Container className="flex h-[calc(75vh)] items-center justify-center">
      <div className="text-center">
        {props.icon ? (
-          <props.icon className="text-primary inline-block h-14 w-14" />
+          <props.icon className="text-primary inline-block size-14" />
        ) : null}
        {props.children}
      </div>
--- a/apps/web/src/components/poll-status.tsx
+++ b/apps/web/src/components/poll-status.tsx
@ -16,7 +16,7 @@ const LabelWithIcon = ({
 }) => {
  return (
    <span className={cn("inline-flex items-center gap-1.5", className)}>
-      <Icon className="-ml-0.5 h-4 w-4" />
+      <Icon className="size-4 -ml-0.5" />
      <span className="font-medium">{children}</span>
    </span>
  );
--- a/apps/web/src/components/poll/desktop-poll.tsx
+++ b/apps/web/src/components/poll/desktop-poll.tsx
@ -135,7 +135,7 @@ const DesktopPoll: React.FunctionComponent = () => {
                </div>
              ) : (
                <div className="flex items-center gap-2">
-                  <Users2Icon className="h-5 w-5 shrink-0" />
+                  <Users2Icon className="size-5 shrink-0" />
                  <div className="font-semibold">
                    {t("participants", { count: participants.length })} (
                    {participants.length})
@ -163,7 +163,7 @@ const DesktopPoll: React.FunctionComponent = () => {
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button disabled={x === 0} onClick={goToPreviousPage}>
-                        <ArrowLeftIcon className="h-4 w-4" />
+                        <ArrowLeftIcon className="size-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
@ -182,7 +182,7 @@ const DesktopPoll: React.FunctionComponent = () => {
                          goToNextPage();
                        }}
                      >
-                        <ArrowRightIcon className="h-4 w-4" />
+                        <ArrowRightIcon className="size-4" />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>
--- a/apps/web/src/components/poll/manage-poll.tsx
+++ b/apps/web/src/components/poll/manage-poll.tsx
@ -43,7 +43,7 @@ const ManagePoll: React.FunctionComponent<{
        <DropdownMenuTrigger asChild={true}>
          <Button icon={SettingsIcon} disabled={disabled}>
            <Trans i18nKey="manage" />
-            <ChevronDownIcon className="h-4 w-4" />
+            <ChevronDownIcon className="size-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
--- a/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
+++ b/apps/web/src/components/poll/manage-poll/finalize-poll-dialog.tsx
@ -240,7 +240,7 @@ export const FinalizePollForm = ({
              </FormDescription>
              {participantsWithoutEmails.length ? (
                <Alert>
-                  <AlertCircleIcon className="h-4 w-4" />
+                  <AlertCircleIcon className="size-4" />
                  <AlertDescription>
                    <Trans
                      i18nKey="missingEmailsAlert"
--- a/apps/web/src/components/poll/notifications-toggle.tsx
+++ b/apps/web/src/components/poll/notifications-toggle.tsx
@ -55,7 +55,7 @@ const NotificationsToggle: React.FunctionComponent = () => {
  const { t } = useTranslation();

  if (!watchers) {
-    return <Skeleton className="h-9 w-9" />;
+    return <Skeleton className="size-9" />;
  }

  return (
--- a/apps/web/src/components/poll/participant-avatar.tsx
+++ b/apps/web/src/components/poll/participant-avatar.tsx
@ -64,7 +64,7 @@ export const ColoredAvatar = (props: {
  return (
    <div
      className={clsx(
-        "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold uppercase",
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold uppercase",
        requiresDarkText ? "text-gray-800" : "text-white",
        props.className,
      )}
--- a/apps/web/src/components/poll/score-summary.tsx
+++ b/apps/web/src/components/poll/score-summary.tsx
@ -57,7 +57,7 @@ export const ScoreSummary: React.FunctionComponent<PopularityScoreProps> =
          opacity: Math.max(score / highScore, 0.2),
        }}
      >
-        <User2Icon className="h-3 w-3" />
+        <User2Icon className="size-3" />
        <AnimatePresence initial={false} mode="wait">
          <m.span
            transition={{
@ -77,7 +77,7 @@ export const ScoreSummary: React.FunctionComponent<PopularityScoreProps> =
          </m.span>
        </AnimatePresence>
        {highlight && ifNeedBeScore > 0 ? (
-          <span className="absolute -right-1 -top-0.5 h-2 w-2 rounded-full bg-amber-400 ring-2 ring-white" />
+          <span className="absolute -right-1 -top-0.5 size-2 rounded-full bg-amber-400 ring-2 ring-white" />
        ) : null}
      </div>
    );
--- a/apps/web/src/components/poll/user-avatar.tsx
+++ b/apps/web/src/components/poll/user-avatar.tsx
@ -109,7 +109,7 @@ export const YouAvatar = () => {
  const you = t("you");
  return (
    <span className="inline-flex items-center gap-x-2.5">
-      <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold uppercase">
+      <span className="inline-flex size-6 items-center justify-center rounded-full bg-gray-200 text-xs font-semibold uppercase">
        {you[0]}
      </span>
      {t("you")}
--- a/apps/web/src/components/poll/vote-icon.tsx
+++ b/apps/web/src/components/poll/vote-icon.tsx
@ -13,7 +13,7 @@ const VoteIcon: React.FunctionComponent<{
      return (
        <YesIcon
          className={clsx("text-green-500", className, {
-            "h-5 w-5": size === "md",
+            "size-5": size === "md",
            "h-3": size === "sm",
          })}
        />
@ -23,7 +23,7 @@ const VoteIcon: React.FunctionComponent<{
      return (
        <IfNeedBeIcon
          className={clsx("text-amber-400", className, {
-            "h-5 w-5": size === "md",
+            "size-5": size === "md",
            "h-3": size === "sm",
          })}
        />
@ -33,7 +33,7 @@ const VoteIcon: React.FunctionComponent<{
      return (
        <NoIcon
          className={clsx("text-gray-400", className, {
-            "h-5 w-5": size === "md",
+            "size-5": size === "md",
            "h-3": size === "sm",
          })}
        />
@ -43,7 +43,7 @@ const VoteIcon: React.FunctionComponent<{
      return (
        <PendingIcon
          className={clsx("text-gray-300", className, {
-            "h-5 w-5": size === "md",
+            "size-5": size === "md",
            "h-3": size === "sm",
          })}
        />
--- a/apps/web/src/components/settings/language-preference.tsx
+++ b/apps/web/src/components/settings/language-preference.tsx
@ -70,7 +70,7 @@ export const LanguagePreference = () => {
              href="https://support.rallly.co/contribute/translations"
            >
              <Trans i18nKey="becomeATranslator" defaults="Help translate" />
-              <ArrowUpRight className="h-4 w-4" />
+              <ArrowUpRight className="size-4" />
            </Link>
          </Button>
        </div>
--- a/apps/web/src/components/settings/settings.tsx
+++ b/apps/web/src/components/settings/settings.tsx
@ -51,7 +51,7 @@ export const SettingsItemTitle = ({
      {hint ? (
        <Tooltip>
          <TooltipTrigger asChild>
-            <InfoIcon className="inline-block h-4 w-4 text-gray-500" />
+            <InfoIcon className="size-4 inline-block text-gray-500" />
          </TooltipTrigger>
          <TooltipContent side="right" className="max-w-sm">
            {hint}
--- a/apps/web/src/components/switch.tsx
+++ b/apps/web/src/components/switch.tsx
@ -31,7 +31,7 @@ const Switch: React.FunctionComponent<SwitchProps> = ({
      <span
        aria-hidden="true"
        className={clsx(
-          "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out",
+          "pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out",
          {
            "translate-x-4": checked,
            "translate-x-0": !checked,
--- a/apps/web/src/components/table.tsx
+++ b/apps/web/src/components/table.tsx
@ -141,7 +141,7 @@ export const Table = <
          disabled={!table.getCanPreviousPage()}
        >
          <ChevronLeftIcon
-            className={cn("h-4 w-4", {
+            className={cn("size-4", {
              "text-gray-400": !table.getCanPreviousPage(),
            })}
          />
@ -162,7 +162,7 @@ export const Table = <
          disabled={!table.getCanNextPage()}
        >
          <ChevronRightIcon
-            className={cn("h-4 w-4", {
+            className={cn("size-4", {
              "text-gray-400": !table.getCanNextPage(),
            })}
          />
--- a/apps/web/src/components/time-zone-picker/time-zone-picker.tsx
+++ b/apps/web/src/components/time-zone-picker/time-zone-picker.tsx
@ -211,7 +211,7 @@ const TimeZonePicker: React.FunctionComponent<{
            {!query ? selectedTimeZone.label : null}
          </span>
          <span className="pointer-events-none flex">
-            <ChevronDownIcon className="h-5 w-5" />
+            <ChevronDownIcon className="size-5" />
          </span>
        </Combobox.Button>
        <FloatingPortal>
--- a/apps/web/src/components/time-zone-picker/time-zone-select.tsx
+++ b/apps/web/src/components/time-zone-picker/time-zone-select.tsx
@ -62,7 +62,7 @@ export const TimeZoneCommand = ({ onSelect, value }: TimeZoneCommandProps) => {
              >
                <CheckIcon
                  className={cn(
-                    "h-4 w-4 shrink-0",
+                    "size-4 shrink-0",
                    value === option.value ? "opacity-100" : "opacity-0",
                  )}
                />
@ -154,7 +154,7 @@ export const TimeZoneSelect = React.forwardRef<HTMLButtonElement, SelectProps>(
            aria-controls={popoverContentId}
            className="bg-input-background flex h-9 w-full min-w-0 items-center gap-x-1.5 rounded-md border px-2 py-2 text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
          >
-            <GlobeIcon className="h-4 w-4" />
+            <GlobeIcon className="size-4" />
            <span className="grow truncate text-left">
              {fuzzyValue ? (
                fuzzyValue.label
@ -165,7 +165,7 @@ export const TimeZoneSelect = React.forwardRef<HTMLButtonElement, SelectProps>(
                />
              )}
            </span>
-            <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <ChevronDownIcon className="size-4 ml-2 shrink-0 opacity-50" />
          </button>
        </PopoverTrigger>
        <PopoverContent
--- a/apps/web/src/components/user-dropdown.tsx
+++ b/apps/web/src/components/user-dropdown.tsx
@ -49,7 +49,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
            <CurrentUserAvatar size="sm" className="-ml-1 shrink-0 " />
            <span className="truncate">{user.name}</span>
          </span>
-          <ChevronDown className="text-muted-foreground h-4 w-4" />
+          <ChevronDown className="text-muted-foreground size-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
@ -67,7 +67,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
        <DropdownMenuSeparator />
        <DropdownMenuItem asChild={true}>
          <Link href="/polls" className="flex items-center gap-x-2 sm:hidden">
-            <ListIcon className="text-muted-foreground h-4 w-4" />
+            <ListIcon className="text-muted-foreground size-4" />
            <Trans i18nKey="polls" defaults="Polls" />
          </Link>
        </DropdownMenuItem>
@ -77,7 +77,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
              href="/settings/profile"
              className="flex items-center gap-x-2"
            >
-              <UserIcon className="text-muted-foreground h-4 w-4" />
+              <UserIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="profile" defaults="Profile" />
            </Link>
          </DropdownMenuItem>
@ -87,7 +87,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
            href="/settings/preferences"
            className="flex items-center gap-x-2"
          >
-            <Settings2Icon className="text-muted-foreground h-4 w-4" />
+            <Settings2Icon className="text-muted-foreground size-4" />
            <Trans i18nKey="preferences" defaults="Preferences" />
          </Link>
        </DropdownMenuItem>
@ -97,7 +97,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
              href="/settings/billing"
              className="flex items-center gap-x-2"
            >
-              <CreditCardIcon className="text-muted-foreground h-4 w-4" />
+              <CreditCardIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="Billing" defaults="Billing" />
            </Link>
          </DropdownMenuItem>
@ -109,7 +109,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
            href="https://support.rallly.co"
            className="flex items-center gap-x-2"
          >
-            <LifeBuoyIcon className="text-muted-foreground h-4 w-4" />
+            <LifeBuoyIcon className="text-muted-foreground size-4" />
            <Trans i18nKey="support" defaults="Support" />
          </Link>
        </DropdownMenuItem>
@ -120,7 +120,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
              href="https://support.rallly.co/self-hosting/pricing"
              className="flex items-center gap-x-2"
            >
-              <GemIcon className="text-muted-foreground h-4 w-4" />
+              <GemIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="pricing" defaults="Pricing" />
            </Link>
          </DropdownMenuItem>
@ -132,7 +132,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
              href="https://feedback.rallly.co"
              className="flex items-center gap-x-2"
            >
-              <MegaphoneIcon className="text-muted-foreground h-4 w-4" />
+              <MegaphoneIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="feedback" defaults="Feedback" />
            </Link>
          </DropdownMenuItem>
@ -141,13 +141,13 @@ export const UserDropdown = ({ className }: { className?: string }) => {
        <IfGuest>
          <DropdownMenuItem asChild={true}>
            <LoginLink className="flex items-center gap-x-2">
-              <LogInIcon className="text-muted-foreground h-4 w-4" />
+              <LogInIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="login" defaults="login" />
            </LoginLink>
          </DropdownMenuItem>
          <DropdownMenuItem asChild={true}>
            <RegisterLink className="flex items-center gap-x-2">
-              <UserPlusIcon className="text-muted-foreground h-4 w-4" />
+              <UserPlusIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="createAnAccount" defaults="Register" />
            </RegisterLink>
          </DropdownMenuItem>
@ -158,7 +158,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
          >
            {/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */}
            <a href="/logout">
-              <RefreshCcwIcon className="text-muted-foreground h-4 w-4" />
+              <RefreshCcwIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="forgetMe" />
            </a>
          </DropdownMenuItem>
@ -167,7 +167,7 @@ export const UserDropdown = ({ className }: { className?: string }) => {
          <DropdownMenuItem asChild className="flex items-center gap-x-2">
            {/* Don't use signOut() from next-auth. It doesn't work in vercel-production env. I don't know why. */}
            <a href="/logout">
-              <LogOutIcon className="text-muted-foreground h-4 w-4" />
+              <LogOutIcon className="text-muted-foreground size-4" />
              <Trans i18nKey="logout" />
            </a>
          </DropdownMenuItem>
--- a/apps/web/src/components/user.tsx
+++ b/apps/web/src/components/user.tsx
@ -37,9 +37,9 @@ export const UserAvatar = ({
      className={clsx(
        "inline-flex items-center justify-center overflow-hidden rounded-full font-semibold",
        {
-          "h-6 w-6 text-sm": size === "sm",
-          "h-8 w-8 text-base": size === "md",
-          "h-14 w-14 text-2xl": size === "lg",
+          "size-6 text-sm": size === "sm",
+          "size-8 text-base": size === "md",
+          "size-14 text-2xl": size === "lg",
        },
        !name
          ? "bg-gray-200"
@ -57,9 +57,9 @@ export const UserAvatar = ({
      ) : (
        <UserIcon
          className={clsx({
-            "h-4 w-4": size === "sm",
-            "h-6 w-6": size === "md",
-            "h-8 w-8": size === "lg",
+            "size-4": size === "sm",
+            "size-6": size === "md",
+            "size-8": size === "lg",
          })}
        />
      )}
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@ -56,7 +56,7 @@
    @apply focus:ring-rose-500;
  }
  .checkbox {
-    @apply text-primary-600 focus:ring-primary-600 h-4 w-4 rounded border-gray-300 shadow-sm;
+    @apply text-primary-600 focus:ring-primary-600 size-4 rounded border-gray-300 shadow-sm;
  }
  .btn {
    @apply inline-flex h-9 select-none items-center justify-center gap-x-1.5 whitespace-nowrap rounded-md border px-2.5 text-sm font-medium;
--- a/packages/icons/src/custom-icons/no.svg
+++ b/packages/icons/src/custom-icons/no.svg
@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
 </svg>
--- a/packages/icons/src/custom-icons/yes.svg
+++ b/packages/icons/src/custom-icons/yes.svg
@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
 </svg>
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@ -5,7 +5,7 @@
  "main": "tailwind.config.js",
  "types": "tailwind.config.d.ts",
  "dependencies": {
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.4.1"
  },
  "devDependencies": {
    "tailwind-scrollbar": "^3.0.4",
--- a/packages/ui/accordion.tsx
+++ b/packages/ui/accordion.tsx
@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef<
      {...props}
    >
      {children}
-      <ChevronDown className="h-4 w-4 transition-transform duration-200" />
+      <ChevronDown className="size-4 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
 ));
--- a/packages/ui/alert.tsx
+++ b/packages/ui/alert.tsx
@ -32,9 +32,7 @@ const Alert = React.forwardRef<
    className={cn(alertVariants({ variant }), className)}
    {...props}
  >
-    {Icon ? (
-      <Icon className="text-muted-foreground -mt-1 mb-2 h-6 w-6" />
-    ) : null}
+    {Icon ? <Icon className="text-muted-foreground -mt-1 mb-2 size-6" /> : null}
    <div>{children}</div>
  </div>
 ));
--- a/packages/ui/billing-plan.tsx
+++ b/packages/ui/billing-plan.tsx
@ -71,7 +71,7 @@ export const BillingPlanPerk = ({
    <li className="flex items-start gap-x-2.5">
      <CheckCircle2Icon
        className={cn(
-          "mt-0.5 h-4 w-4 shrink-0",
+          "size-4 mt-0.5 shrink-0",
          !pro ? "text-gray-500" : "text-primary",
        )}
      />
--- a/packages/ui/button.tsx
+++ b/packages/ui/button.tsx
@ -77,9 +77,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
        ) : (
          <>
            {loading ? (
-              <Loader2Icon className="h-4 w-4 animate-spin" />
+              <Loader2Icon className="size-4 animate-spin" />
            ) : Icon ? (
-              <Icon className={cn("-ml-0.5 h-4 w-4")} />
+              <Icon className={cn("size-4 -ml-0.5")} />
            ) : null}
            {children}
          </>
--- a/packages/ui/checkbox.tsx
+++ b/packages/ui/checkbox.tsx
@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
-      "data-[state=checked]:border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary peer h-5 w-5 shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white",
+      "data-[state=checked]:border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary peer size-5 shrink-0 border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-white",
      className,
    )}
    {...props}
@ -21,7 +21,7 @@ const Checkbox = React.forwardRef<
    <CheckboxPrimitive.Indicator
      className={cn("flex items-center justify-center text-current")}
    >
-      <CheckIcon className="h-4 w-4" />
+      <CheckIcon className="size-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
 ));
--- a/packages/ui/command.tsx
+++ b/packages/ui/command.tsx
@ -42,7 +42,7 @@ const CommandInput = React.forwardRef<
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <SearchIcon className="size-4 mr-2 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
--- a/packages/ui/dialog.tsx
+++ b/packages/ui/dialog.tsx
@ -66,7 +66,7 @@ const DialogContent = React.forwardRef<
      {!hideCloseButton ? (
        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
          <>
-            <XIcon className="h-4 w-4" />
+            <XIcon className="size-4" />
            <span className="sr-only">Close</span>
          </>
        </DialogPrimitive.Close>
--- a/packages/ui/dropdown-menu.tsx
+++ b/packages/ui/dropdown-menu.tsx
@ -34,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
    {...props}
  >
    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto size-4" />
  </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@ -107,7 +107,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
@ -130,7 +130,7 @@ const DropdownMenuRadioItem = React.forwardRef<
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
-        <PlusCircleIcon className="h-2 w-2 fill-current" />
+        <PlusCircleIcon className="size-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
@ -208,7 +208,7 @@ export const DropdownMenuItemIconLabel = ({
 }) => {
  return (
    <span className="flex items-center gap-2">
-      <Icon className="h-4 w-4" />
+      <Icon className="size-4" />
      {children}
    </span>
  );
--- a/packages/ui/radio-group.tsx
+++ b/packages/ui/radio-group.tsx
@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
-        "border-border bg-background text-primary ring-offset-background focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-border bg-background text-primary ring-offset-background focus-visible:ring-ring size-4 aspect-square rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
--- a/packages/ui/select.tsx
+++ b/packages/ui/select.tsx
@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
  >
    {children}
    <SelectPrimitive.Icon asChild>
-      <ChevronDownIcon className="ml-2 h-4 w-4 opacity-50" />
+      <ChevronDownIcon className="size-4 ml-2 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
 ));
@ -87,7 +87,7 @@ const SelectItem = React.forwardRef<
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <CheckIcon className="size-4" />
      </SelectPrimitive.ItemIndicator>
    </span>
    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
--- a/packages/ui/toast.tsx
+++ b/packages/ui/toast.tsx
@ -81,7 +81,7 @@ const ToastClose = React.forwardRef<
    toast-close=""
    {...props}
  >
-    <X className="h-4 w-4" />
+    <X className="size-4" />
  </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
--- a/yarn.lock
+++ b/yarn.lock
@ -6359,7 +6359,7 @@ fast-folder-size@1.6.1:
  dependencies:
    unzipper "^0.10.11"

-fast-glob@^3.2.12, fast-glob@^3.2.9:
+fast-glob@^3.2.9:
  version "3.2.12"
  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@ -6370,6 +6370,17 @@ fast-glob@^3.2.12, fast-glob@^3.2.9:
    merge2 "^1.3.0"
    micromatch "^4.0.4"

+fast-glob@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
 fast-glob@^3.3.1:
  version "3.3.1"
  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4"
@ -7703,10 +7714,10 @@ iterator.prototype@^1.1.2:
    reflect.getprototypeof "^1.0.4"
    set-function-name "^2.0.1"

-jiti@^1.18.2:
-  version "1.19.1"
-  resolved "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz"
-  integrity sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==
+jiti@^1.19.1:
+  version "1.21.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
+  integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==

 jju@^1.4.0:
  version "1.4.0"
@ -10728,20 +10739,20 @@ tailwindcss-animate@^1.0.5:
  resolved "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.5.tgz"
  integrity sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==

-tailwindcss@^3.3.3:
-  version "3.3.3"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz"
-  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
+tailwindcss@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"
+  integrity sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==
  dependencies:
    "@alloc/quick-lru" "^5.2.0"
    arg "^5.0.2"
    chokidar "^3.5.3"
    didyoumean "^1.2.2"
    dlv "^1.1.3"
-    fast-glob "^3.2.12"
+    fast-glob "^3.3.0"
    glob-parent "^6.0.2"
    is-glob "^4.0.3"
-    jiti "^1.18.2"
+    jiti "^1.19.1"
    lilconfig "^2.1.0"
    micromatch "^4.0.5"
    normalize-path "^3.0.0"