feat: Update to Tailwind v4 (#7669)

* initial upgrade * Update plugin, homepage, and examples * fix jest resolver * Update tailwind starter * Update rac-tailwind example app * Update rac-spectrum-tailwind example * enable verdaccio build * update tailwind-variants * patch * update lockfile * missing dependency * copy patches when building website * dedupe lightningcss * Update styling page * Fix TextField focus state * revert verdaccio * fix typo
adobe · Jan 29, 2025 · 9efdd3b · 9efdd3b · rspbot · Jan 29, 2025
1 parent e228ed8
commit 9efdd3b
Show file tree

Hide file tree

Showing 90 changed files with 1,622 additions and 1,214 deletions.
diff --git a/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch b/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch
@@ -0,0 +1,19 @@
+diff --git a/dist/transformer.d.ts b/dist/transformer.d.ts
+index 508be4d8176486bfbbccd0b8cf297465c8efd15a..afbd775c60f09c8a9c35e30c79f286fddc7c7018 100644
+--- a/dist/transformer.d.ts
++++ b/dist/transformer.d.ts
+@@ -1,10 +1,10 @@
+-import type {Config} from "tailwindcss/types/config";
+-import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";
++// import type {Config} from "tailwindcss/types/config";
++// import type {DefaultTheme} from "tailwindcss/types/generated/default-theme";
+
+-export type DefaultScreens = keyof DefaultTheme["screens"];
++export type DefaultScreens = any;
+
+ export type WithTV = {
+-  <C extends Config>(tvConfig: C, config?: TVTransformerConfig): C;
++  <C>(tvConfig: C, config?: TVTransformerConfig): C;
+ };
+
+ export declare const withTV: WithTV;
diff --git a/examples/rac-spectrum-tailwind/.postcssrc b/examples/rac-spectrum-tailwind/.postcssrc
@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
 }
diff --git a/examples/rac-spectrum-tailwind/package.json b/examples/rac-spectrum-tailwind/package.json
@@ -12,13 +12,14 @@
     "@react-spectrum/provider": "^3.9.7",
     "@spectrum-icons/illustrations": "^3.6.3",
     "@spectrum-icons/workflow": "^4.2.12",
+    "@tailwindcss/postcss": "^4.0.0",
     "parcel": "^2.13.0",
     "postcss": "^8.2.1",
     "react": "^18.2.0",
-    "react-aria-components": "^1.0.0-alpha.4",
+    "react-aria-components": "^1.6.0",
     "react-dom": "^18.2.0",
     "react-stately": "^3.23.0",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.5"
   },
   "devDependencies": {

diff --git a/examples/rac-spectrum-tailwind/src/components/GenInputField.tsx b/examples/rac-spectrum-tailwind/src/components/GenInputField.tsx
@@ -16,13 +16,13 @@ export function GenInputField() {
         value={value}
         onChange={setValue}
         aria-label="Prompt"
-        className="flex-grow h-full p-150"
+        className="grow h-full p-150"
       >
-        <Input className="w-full h-full text-xl font-semibold text-black dark:bg-black dark:text-white p-50 focus:outline-none" />
+        <Input className="w-full h-full text-xl font-semibold text-black dark:bg-black dark:text-white p-50 focus:outline-hidden" />
       </TextField>
       <Button
         isDisabled={value === ""}
-        className="self-end my-auto font-semibold text-white rounded-full disabled:bg-gray-300 disabled:text-gray-500 mx-200 bg-accent-800 p-150 focus-visible:ring focus:outline-none"
+        className="self-end my-auto font-semibold text-white rounded-full disabled:bg-gray-300 disabled:text-gray-500 mx-200 bg-accent-800 p-150 focus-visible:ring focus:outline-hidden"
       >
         Generate
       </Button>

diff --git a/examples/rac-spectrum-tailwind/src/components/NavigationBox.tsx b/examples/rac-spectrum-tailwind/src/components/NavigationBox.tsx
@@ -9,7 +9,7 @@ export function NavigationBox({ children, src, ...other }: NavigationBoxProps) {
   return (
     <Link
       style={{ backgroundImage: `url("${src}")` }}
-      className="flex text-center text-white bg-cover m-175 rounded-medium h-2000 w-2000 p-60 focus-visible:ring focus:outline-none"
+      className="flex text-center text-white bg-cover m-175 rounded-medium h-2000 w-2000 p-60 focus-visible:ring focus:outline-hidden"
       {...other}
     >
       <div

diff --git a/examples/rac-spectrum-tailwind/src/components/SelectBoxGroup.tsx b/examples/rac-spectrum-tailwind/src/components/SelectBoxGroup.tsx
@@ -29,7 +29,7 @@ export function SelectBox({ name, icon, description }: SelectBoxProps) {
   return (
     <Radio
       value={name}
-      className="flex justify-center bg-white border rounded dark:bg-black p-160 m-160 h-2000 w-2000 focus:outline-none focus-visible:ring-half focus-visible:ring-offset-0 selected:bg-accent-100 selected:border-accent-700"
+      className="flex justify-center bg-white border rounded dark:bg-black p-160 m-160 h-2000 w-2000 focus:outline-hidden focus-visible:ring-half focus-visible:ring-offset-0 selected:bg-accent-100 selected:border-accent-700"
     >
       {({ isSelected }) => (
         <div className="relative flex flex-col items-center justify-center w-full h-full gap-150">

diff --git a/examples/rac-spectrum-tailwind/src/components/SentimentRatingGroup.tsx b/examples/rac-spectrum-tailwind/src/components/SentimentRatingGroup.tsx
@@ -40,7 +40,7 @@ export function SentimentRating({ rating }: { rating: string }) {
   return (
     <Radio
       value={rating}
-      className="flex items-center justify-center bg-white border rounded-full disabled:bg-gray-200 disabled:text-gray-400 p-160 m-75 h-200 w-200 focus:outline-none focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hover:border-gray-300"
+      className="flex items-center justify-center bg-white border rounded-full disabled:bg-gray-200 disabled:text-gray-400 p-160 m-75 h-200 w-200 focus:outline-hidden focus-visible:ring dark:bg-black selected:bg-accent-800 dark:selected:bg-accent-800 selected:border-accent-800 selected:text-white pressed:bg-gray-200 dark:pressed:bg-gray-200 hover:border-gray-300"
     >
       {rating}
     </Radio>

diff --git a/examples/rac-spectrum-tailwind/src/style.css b/examples/rac-spectrum-tailwind/src/style.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' source("./");
+
+@config '../tailwind.config.js';
 
 * {
   -webkit-tap-highlight-color: transparent;

diff --git a/examples/rac-tailwind/.postcssrc b/examples/rac-tailwind/.postcssrc
@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
 }
diff --git a/examples/rac-tailwind/package.json b/examples/rac-tailwind/package.json
@@ -10,14 +10,15 @@
   "dependencies": {
     "@heroicons/react": "^2.0.16",
     "@react-aria/parcel-resolver-optimize-locales": "^1.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "framer-motion": "^10.12.16",
     "parcel": "^2.13.0",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
-    "react-aria-components": "^1.0.0-alpha.4",
+    "react-aria-components": "^1.6.0",
     "react-dom": "^18.2.0",
     "react-stately": "^3.23.0",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.5"
   },
   "devDependencies": {

diff --git a/examples/rac-tailwind/src/AnimatedCalendar.tsx b/examples/rac-tailwind/src/AnimatedCalendar.tsx
@@ -34,7 +34,7 @@ export function AnimatedCalendar() {
                 state.focusPreviousPage();
                 setPageOffset(pageOffset - 1);
               }}
-              className="w-12 h-12 sm:w-9 sm:h-9 ml-4 outline-none cursor-default rounded-full flex items-center justify-center data-[hovered]:bg-gray-100 data-[pressed]:bg-gray-200 data-[focus-visible]:ring data-[focus-visible]:ring-black data-[focus-visible]:ring-offset-2">
+              className="w-12 h-12 sm:w-9 sm:h-9 ml-4 outline-hidden cursor-default rounded-full flex items-center justify-center data-hovered:bg-gray-100 data-pressed:bg-gray-200 data-focus-visible:ring-3 data-focus-visible:ring-black data-focus-visible:ring-offset-2">
               <ChevronLeftIcon className="h-6 w-6" />
             </Button>
             <Button
@@ -43,7 +43,7 @@ export function AnimatedCalendar() {
                 state.focusNextPage();
                 setPageOffset(pageOffset + 1);
               }}
-              className="w-12 h-12 sm:w-9 sm:h-9 outline-none cursor-default rounded-full flex items-center justify-center data-[hovered]:bg-gray-100 data-[pressed]:bg-gray-200 data-[focus-visible]:ring data-[focus-visible]:ring-black data-[focus-visible]:ring-offset-2">
+              className="w-12 h-12 sm:w-9 sm:h-9 outline-hidden cursor-default rounded-full flex items-center justify-center data-hovered:bg-gray-100 data-pressed:bg-gray-200 data-focus-visible:ring-3 data-focus-visible:ring-black data-focus-visible:ring-offset-2">
               <ChevronRightIcon className="h-6 w-6" />
             </Button>
           </header>
@@ -81,7 +81,7 @@ function Month({offset}: { offset: number }) {
         {(date) => (
           <CalendarCell
             date={date}
-            className="w-12 h-12 sm:w-9 sm:h-9 outline-none cursor-default rounded-full text-md sm:text-sm flex items-center justify-center data-[outside-month]:text-gray-300 data-[hovered]:bg-gray-100 data-[pressed]:bg-gray-200 data-[selected]:data-[hovered]:bg-black data-[selected]:bg-black data-[selected]:text-white data-[focus-visible]:ring data-[focus-visible]:ring-black data-[focus-visible]:ring-offset-2" />
+            className="w-12 h-12 sm:w-9 sm:h-9 outline-hidden cursor-default rounded-full text-md sm:text-sm flex items-center justify-center data-outside-month:text-gray-300 data-hovered:bg-gray-100 data-pressed:bg-gray-200 data-selected:data-hovered:bg-black data-selected:bg-black data-selected:text-white data-focus-visible:ring-3 data-focus-visible:ring-black data-focus-visible:ring-offset-2" />
         )}
       </CalendarGridBody>
     </CalendarGrid>