Merge branch 'astro/upgrade' into chore/tailwind-v4

t3-oss · Feb 9, 2025 · 4ed14f8 · 4ed14f8
2 parents d67f16d + 92baf36
commit 4ed14f8
Show file tree

Hide file tree

Showing 36 changed files with 1,674 additions and 1,473 deletions.
diff --git a/cli/template/extras/config/tailwind.config.ts b/cli/template/extras/config/tailwind.config.ts
diff --git a/cli/template/extras/src/styles/globals.css b/cli/template/extras/src/styles/globals.css
@@ -1,3 +1,6 @@
 @import "tailwindcss";
 
-@config "../../tailwind.config.ts";
+@theme {
+  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/www/package.json b/www/package.json
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.23.3",
-    "@astrojs/mdx": "^3.0.1",
-    "@astrojs/sitemap": "^3.1.5",
-    "@astrojs/vercel": "^7.6.0",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/vercel": "^8.0.6",
     "@docsearch/css": "^3.3.4",
     "@docsearch/react": "^3.3.4",
     "@fontsource/inter": "^4.5.15",
@@ -35,35 +35,35 @@
     "embla-carousel-autoplay": "^7.1.0",
     "satori": "^0.8.1",
     "sharp": "^0.32.6",
-    "tailwind-scrollbar": "^3.0.0",
+    "tailwind-scrollbar": "^4.0.0",
     "treeify": "^1.1.0",
     "unist-util-visit": "^4.1.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@astrojs/react": "^3.4.0",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/react": "^4.2.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-typist": "^2.0.6",
     "@types/treeify": "^1.0.3",
     "@typescript-eslint/parser": "^8.1.0",
-    "astro": "^4.9.1",
+    "astro": "^5.2.5",
     "eslint": "^8.57.0",
     "eslint-plugin-astro": "^1.2.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "prettier": "^3.3.2",
     "prettier-plugin-astro": "^0.14.0",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "react-typist": "^2.0.5",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-external-links": "^2.1.0",
     "rehype-slug": "^5.1.0",
     "remark-code-titles": "^0.1.2",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.5.3"
   }
 }
diff --git a/www/postcss.config.cjs b/www/postcss.config.cjs
@@ -1,7 +1,6 @@
 const config = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
 

diff --git a/www/src/components/accessibility/jumpToContent.astro b/www/src/components/accessibility/jumpToContent.astro
@@ -4,7 +4,7 @@ import Button from "../landingPage/button.astro";
 
 <Button
   href="#content"
-  className="absolute -top-96 z-50 opacity-0 focus:top-0 focus:opacity-100 ltr:-left-96 ltr:focus:left-0 rtl:-right-96 rtl:focus:right-0"
+  className="absolute -top-96 z-50 opacity-0 focus:top-0 focus:opacity-100 ltr:-left-96 focus:ltr:left-0 rtl:-right-96 focus:rtl:right-0"
 >
   Jump to content
 </Button>
diff --git a/www/src/components/branding/Asset.astro b/www/src/components/branding/Asset.astro
@@ -26,7 +26,7 @@ function getDownloadName(path: string) {
 }
 ---
 
-<div class="flex w-80 flex-col overflow-hidden rounded">
+<div class="flex w-80 flex-col overflow-hidden rounded-sm">
   <div
     class={`${
       bg === "white" ? "bg-white" : "bg-black"

diff --git a/www/src/components/docs/breadCrumbs.tsx b/www/src/components/docs/breadCrumbs.tsx
@@ -78,7 +78,7 @@ export default function BreadCrumbs() {
           />
         </svg>
       </a>
-      <span className="flex-shrink-0">
+      <span className="shrink-0">
         <BreadCrumbsArrow isRtl={isRtl} />
       </span>
       {breadcrumbs.map((crumb, index) => (
@@ -90,7 +90,7 @@ export default function BreadCrumbs() {
             {crumb.text}
           </a>
           {index < breadcrumbs.length - 1 && (
-            <span className="flex-shrink-0">
+            <span className="shrink-0">
               <BreadCrumbsArrow isRtl={isRtl} />
             </span>
           )}

diff --git a/www/src/components/docs/exampleOptionForm.astro b/www/src/components/docs/exampleOptionForm.astro
@@ -80,7 +80,7 @@ const options = {
 <form
   method="get"
   id="componentForm"
-  class="border-t3-purple-300 mb-4 w-full rounded border p-4 text-lg"
+  class="border-t3-purple-300 mb-4 w-full rounded-sm border p-4 text-lg"
 >
   {
     Object.entries(options).map(([code, name]) => (

diff --git a/www/src/components/docs/folderStructureForm.astro b/www/src/components/docs/folderStructureForm.astro
@@ -100,7 +100,7 @@ const options = {
 <form
   method="get"
   id="componentForm"
-  class="border-t3-purple-300 mb-4 w-full rounded border p-4 text-lg"
+  class="border-t3-purple-300 mb-4 w-full rounded-sm border p-4 text-lg"
 >
   {
     Object.entries(options).map(([code, name]) => (

diff --git a/www/src/components/docs/pageContent.astro b/www/src/components/docs/pageContent.astro
@@ -21,7 +21,7 @@ const [_1, _2, lang] = path.split("/");
 const isRtl = getIsRtlFromLangCode((lang || "en") as KnownLanguageCode);
 ---
 
-<article id="article" class="flex w-full max-w-screen-lg flex-col">
+<article id="article" class="flex w-full max-w-(--breakpoint-lg) flex-col">
   {lang && lang !== "en" && <OutdatedDocsBanner path={path} />}
   <div class="mb-4 h-8">
     <BreadCrumbs client:only />
@@ -68,7 +68,7 @@ const isRtl = getIsRtlFromLangCode((lang || "en") as KnownLanguageCode);
 
     let copyButton = document.createElement("button");
     copyButton.className =
-      "inline-flex absolute right-[.45em] top-[.5em] bg-zinc-100/20 rounded px-1 py-1 text-sm text-zinc-50 hover:bg-zinc-100/25 focus:outline-none focus:shadow-outline text-brand-primary";
+      "inline-flex absolute right-[.45em] top-[.5em] bg-zinc-100/20 rounded-sm px-1 py-1 text-sm text-zinc-50 hover:bg-zinc-100/25 focus:outline-hidden focus:shadow-outline text-brand-primary";
     copyButton.innerHTML = copySVG;
     copyButton.addEventListener("click", () => {
       let text = "";

diff --git a/www/src/components/icons/leftArrow.astro b/www/src/components/icons/leftArrow.astro
@@ -3,7 +3,7 @@
   viewBox="0 0 24 24"
   stroke="currentColor"
   height={24}
-  class="mr-1 inline flex-shrink-0 rotate-180 transform"
+  class="mr-1 inline shrink-0 rotate-180 transform"
 >
   <path
     stroke-linecap="round"

diff --git a/www/src/components/icons/rightArrow.astro b/www/src/components/icons/rightArrow.astro
@@ -3,7 +3,7 @@
   viewBox="0 0 24 24"
   stroke="currentColor"
   height={24}
-  class="ml-1 inline flex-shrink-0 transform"
+  class="ml-1 inline shrink-0 transform"
 >
   <path
     stroke-linecap="round"

diff --git a/www/src/components/landingPage/ClipboardSelect.tsx b/www/src/components/landingPage/ClipboardSelect.tsx
@@ -42,7 +42,7 @@ export default function ClipboardSelect() {
     <div className="flex items-center gap-2">
       <Menu as="div">
         <div className="relative">
-          <Menu.Button className="bg-t3-purple-200/50 hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50 relative flex cursor-pointer items-center justify-center rounded-lg border p-2 text-left focus:outline-none sm:text-sm">
+          <Menu.Button className="bg-t3-purple-200/50 hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50 relative flex cursor-pointer items-center justify-center rounded-lg border p-2 text-left focus:outline-hidden sm:text-sm">
             <svg
               className={`h-[1em] w-[1em] ${coolDown && "hidden"}`}
               xmlns="http://www.w3.org/2000/svg"
@@ -84,7 +84,7 @@ export default function ClipboardSelect() {
           >
             <Menu.Items
               className={clsx(
-                "focus-none shadow-l t3-scrollbar bg-default dark:border-t3-purple-200/20 absolute right-0 mt-1 max-h-60 w-fit min-w-[6em] overflow-auto rounded-lg border text-base focus:outline-none focus-visible:outline-none sm:text-sm",
+                "focus-none shadow-l t3-scrollbar bg-default dark:border-t3-purple-200/20 absolute right-0 mt-1 max-h-60 w-fit min-w-[6em] overflow-auto rounded-lg border text-base focus:outline-hidden focus-visible:outline-hidden sm:text-sm",
               )}
             >
               {commands.map(({ manager, command }) => (

diff --git a/www/src/components/landingPage/button.astro b/www/src/components/landingPage/button.astro
@@ -27,7 +27,7 @@ const variantClass =
     : "bg-white/10 hover:bg-white/20 text-white";
 
 const specialHoverClass = specialHover
-  ? "hover:shadow hover:shadow-[#300171] duration-500"
+  ? "hover:shadow-sm hover:shadow-[#300171] duration-500"
   : "";
 ---
 

diff --git a/www/src/components/landingPage/cli.tsx b/www/src/components/landingPage/cli.tsx
@@ -18,7 +18,7 @@ export default function CodeCard() {
           <Typist.Delay ms={1250} />
         </Typist>
         <Typist
-          className="translate-y-[-0.2rem] bg-gradient-to-r from-blue-400 via-green-300 to-pink-600 bg-clip-text font-mono text-[7px] leading-1 text-transparent sm:text-sm md:translate-y-[-0.4rem]"
+          className="translate-y-[-0.2rem] bg-linear-to-r from-blue-400 via-green-300 to-pink-600 bg-clip-text font-mono text-[7px] leading-1 text-transparent sm:text-sm md:translate-y-[-0.4rem]"
           cursor={{ show: false }}
           avgTypingDelay={-500}
         >

diff --git a/www/src/components/navigation/LanguageSelect.tsx b/www/src/components/navigation/LanguageSelect.tsx
@@ -21,7 +21,7 @@ export default function LanguageSelect({ language }: LanguageSelectProps) {
     <div className="flex items-center gap-2">
       <Listbox value={language} onChange={handleSelect}>
         <div className="relative">
-          <Listbox.Button className="bg-t3-purple-200/50 hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50 relative flex cursor-pointer items-center justify-center rounded-lg border p-2 text-left focus:outline-none sm:text-sm">
+          <Listbox.Button className="bg-t3-purple-200/50 hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50 relative flex cursor-pointer items-center justify-center rounded-lg border p-2 text-left focus:outline-hidden sm:text-sm">
             <svg
               viewBox="0 0 88.6 77.3"
               className="dark:text-t3-purple-100 h-6 w-6 text-slate-900"
@@ -46,15 +46,15 @@ export default function LanguageSelect({ language }: LanguageSelectProps) {
             <Listbox.Options
               dir="ltr"
               className={clsx(
-                "focus-none shadow-l t3-scrollbar bg-default dark:border-t3-purple-200/20 absolute right-0 mt-1 max-h-60 w-fit overflow-auto rounded-lg border text-base focus:outline-none focus-visible:outline-none sm:text-sm",
+                "focus-none shadow-l t3-scrollbar bg-default dark:border-t3-purple-200/20 absolute right-0 mt-1 max-h-60 w-fit overflow-auto rounded-lg border text-base focus:outline-hidden focus-visible:outline-hidden sm:text-sm",
                 isRTL && "text-right",
               )}
             >
               {Object.entries(KNOWN_LANGUAGES).map(([code, name]) => (
                 <Listbox.Option
                   key={code}
                   className={({ selected, active }) =>
-                    `focus-none bg-t3-purple-200/50 hover:bg-t3-purple-300/75 dark:bg-t3-purple-200/10 dark:text-t3-purple-100 dark:hover:bg-t3-purple-200/20 relative cursor-pointer px-4 py-2 text-slate-900 outline-none ${
+                    `focus-none bg-t3-purple-200/50 hover:bg-t3-purple-300/75 dark:bg-t3-purple-200/10 dark:text-t3-purple-100 dark:hover:bg-t3-purple-200/20 relative cursor-pointer px-4 py-2 text-slate-900 outline-hidden ${
                       selected && "bg-t3-purple-400/75 dark:bg-t3-purple-400/20"
                     } ${active && "bg-t3-purple-300/75 dark:bg-t3-purple-200/20"}`
                   }

diff --git a/www/src/components/navigation/OnThisPageLinks.tsx b/www/src/components/navigation/OnThisPageLinks.tsx
@@ -75,7 +75,7 @@ export default function OnThisPageLinks({
   }, [headings, title]);
 
   return (
-    <div className="bg-default sticky inset-x-0 top-[72px] z-[11] block w-full px-4 pt-2 pb-4 lg:hidden">
+    <div className="bg-default sticky inset-x-0 top-[72px] z-11 block w-full px-4 pt-2 pb-4 lg:hidden">
       <Menu>
         {({ open }) => (
           <div className="relative w-full">

diff --git a/www/src/components/navigation/Search.tsx b/www/src/components/navigation/Search.tsx
@@ -57,7 +57,7 @@ export default function Search({ isLanding }: { isLanding: boolean }) {
         ref={searchButtonRef}
         onClick={onOpen}
         className={clsx(
-          "flex w-full cursor-text items-center justify-between rounded-lg px-4 py-2 text-sm font-medium text-slate-800 !transition-colors !duration-300 dark:text-slate-100",
+          "flex w-full cursor-text items-center justify-between rounded-lg px-4 py-2 text-sm font-medium text-slate-800 transition-colors! duration-300! dark:text-slate-100",
           {
             "hover:bg-t3-purple/20 border-t3-purple-200/20 bg-t3-purple-200/10 hover:border-t3-purple-200/50 border duration-300":
               isLanding,

diff --git a/www/src/components/navigation/githubIcon.astro b/www/src/components/navigation/githubIcon.astro
@@ -40,14 +40,14 @@ const isRtl = getIsRtlFromUrl(pathname);
   <div
     id="github-star"
     class:list={[
-      "border-t3-purple-200/50 bg-t3-purple-200/50 group-hover:border-t3-purple-200/75 group-hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:group-hover:border-t3-purple-200/50 dark:group-hover:bg-t3-purple-200/10 relative hidden items-center rounded-lg border bg-clip-padding px-2 py-1 text-slate-800 no-underline !transition-colors !duration-300 md:flex ltr:mr-[.33em] rtl:ml-[.33em] dark:text-slate-100",
+      "border-t3-purple-200/50 bg-t3-purple-200/50 group-hover:border-t3-purple-200/75 group-hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:group-hover:border-t3-purple-200/50 dark:group-hover:bg-t3-purple-200/10 relative hidden items-center rounded-lg border bg-clip-padding px-2 py-1 text-slate-800 no-underline transition-colors! duration-300! md:flex ltr:mr-[.33em] rtl:ml-[.33em] dark:text-slate-100",
       [
         /** triangle arrow */
         "after:absolute after:h-0 after:w-0 after:border-8 after:border-transparent after:transition-colors after:duration-300",
         isRtl &&
-          "after:border-r-t3-purple-200/50 after:group-hover:border-r-t3-purple-200/75 dark:after:border-r-t3-purple-200/20 dark:after:group-hover:border-r-t3-purple-200/50 after:left-[calc(-0.5em-1px)] after:border-l-0",
+          "after:border-r-t3-purple-200/50 group-hover:after:border-r-t3-purple-200/75 dark:after:border-r-t3-purple-200/20 dark:group-hover:after:border-r-t3-purple-200/50 after:left-[calc(-0.5em-1px)] after:border-l-0",
         !isRtl &&
-          "after:border-l-t3-purple-200/50 after:group-hover:border-l-t3-purple-200/75 dark:after:border-l-t3-purple-200/20 dark:after:group-hover:border-l-t3-purple-200/50 after:right-[calc(-0.5em-1px)] after:border-r-0",
+          "after:border-l-t3-purple-200/50 group-hover:after:border-l-t3-purple-200/75 dark:after:border-l-t3-purple-200/20 dark:group-hover:after:border-l-t3-purple-200/50 after:right-[calc(-0.5em-1px)] after:border-r-0",
       ],
     ]}
   >

diff --git a/www/src/components/navigation/navbar.astro b/www/src/components/navigation/navbar.astro
@@ -90,7 +90,7 @@ const navbarLinks: Array<{ href: string; label: string }> = [
         }
       </div>
     </div>
-    <div class="flex flex-grow items-center justify-end gap-4">
+    <div class="flex grow items-center justify-end gap-4">
       <GithubIcon />
       {!isLanding && <LanguageSelect language={langCode} client:load />}
       <div

diff --git a/www/src/layouts/landingPage.astro b/www/src/layouts/landingPage.astro
@@ -43,7 +43,7 @@ const { isNotFound } = Astro.props;
     </script>
   </head>
   <body
-    class="min-h-screen bg-gradient-to-b from-gray-900 via-[#300171] to-slate-900"
+    class="min-h-screen bg-linear-to-b from-gray-900 via-[#300171] to-slate-900"
   >
     <JumpToContent />
     <div

diff --git a/www/src/pages/ar/usage/tailwind.md b/www/src/pages/ar/usage/tailwind.md
@@ -44,7 +44,7 @@ import "./my-class.css";
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/en/usage/tailwind.md b/www/src/pages/en/usage/tailwind.md
@@ -46,7 +46,7 @@ Equivalent in Tailwind:
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/es/usage/tailwind.md b/www/src/pages/es/usage/tailwind.md
@@ -46,7 +46,7 @@ Equivalente en Tailwind:
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/fr/usage/tailwind.md b/www/src/pages/fr/usage/tailwind.md
@@ -45,7 +45,7 @@ import "./my-class.css";
 1. Écrivez simplement des classes dans votre HTML
 
 ```jsx
-<div class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4">
+<div class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4">
   ...
 </div>
 ```

diff --git a/www/src/pages/ja/usage/tailwind.md b/www/src/pages/ja/usage/tailwind.md
@@ -46,7 +46,7 @@ Tailwind で同じことをするとこうなります：
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/no/usage/tailwind.md b/www/src/pages/no/usage/tailwind.md
@@ -46,7 +46,7 @@ Tilsvarende i Tailwind:
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/pl/usage/tailwind.md b/www/src/pages/pl/usage/tailwind.md
@@ -46,7 +46,7 @@ Odpowiednik z Tailwindem:
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/pt/usage/tailwind.md b/www/src/pages/pt/usage/tailwind.md
@@ -46,7 +46,7 @@ Equivalente com Tailwind:
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/ru/usage/tailwind.md b/www/src/pages/ru/usage/tailwind.md
@@ -46,7 +46,7 @@ import "./my-class.css";
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/uk/usage/tailwind.md b/www/src/pages/uk/usage/tailwind.md
@@ -46,7 +46,7 @@ import "./my-class.css";
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>

diff --git a/www/src/pages/zh-hans/usage/tailwind.md b/www/src/pages/zh-hans/usage/tailwind.md
@@ -46,7 +46,7 @@ import "./my-class.css";
 
 ```html
 <div
-  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+  class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
 >
   ...
 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,7 @@ import "./my-class.css"; @@
     ```html
     <div
-      class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+      class="flex flex-col items-center justify-center rounded-sm border border-gray-200 bg-white p-4"
     >
       ...
     </div>
@@ Expand Down @@