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

Author: devongovett

.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;

examples/rac-spectrum-tailwind/.postcssrc

@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
 }

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": {

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>

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

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">

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>

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;

examples/rac-tailwind/.postcssrc

@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
 }

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": {