From 811e67914b262187321c563c886bbc43c69799c8 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 11:41:29 -0500
Subject: [PATCH 01/17] initial upgrade

---
 examples/rac-spectrum-tailwind/.postcssrc     |   2 +-
 .../src/components/GenInputField.tsx          |   6 +-
 .../src/components/NavigationBox.tsx          |   2 +-
 .../src/components/SelectBoxGroup.tsx         |   2 +-
 .../src/components/SentimentRatingGroup.tsx   |   2 +-
 examples/rac-spectrum-tailwind/src/style.css  |   6 +-
 examples/rac-tailwind/.postcssrc              |   2 +-
 .../rac-tailwind/src/AnimatedCalendar.tsx     |   6 +-
 examples/rac-tailwind/src/App.js              | 114 +++----
 examples/rac-tailwind/src/style.css           |   6 +-
 examples/rac-tailwind/tailwind.config.js      |  12 -
 package.json                                  |   2 +-
 packages/dev/docs/pages/react-aria/.postcssrc |   2 +-
 .../dev/docs/pages/react-aria/components.mdx  |   2 +-
 .../dev/docs/pages/react-aria/home.global.css |  19 +-
 .../dev/docs/pages/react-aria/home/A11y.tsx   |   6 +-
 .../docs/pages/react-aria/home/ExampleApp.tsx |  36 +--
 .../pages/react-aria/home/KanbanExample.tsx   |   8 +-
 .../docs/pages/react-aria/home/Keyboard.tsx   |   2 +-
 .../dev/docs/pages/react-aria/home/Styles.tsx |   6 +-
 .../pages/react-aria/home/SwitchAnimation.tsx |   4 +-
 .../docs/pages/react-aria/home/components.tsx |   6 +-
 packages/dev/docs/pages/react-aria/index.mdx  |  28 +-
 .../docs/examples/.postcssrc                  |   2 +-
 .../docs/examples/account-menu.mdx            |  12 +-
 .../docs/examples/action-menu.mdx             |   8 +-
 .../docs/examples/category-tabs.mdx           |  10 +-
 .../docs/examples/contact-list.mdx            |   6 +-
 .../docs/examples/datepicker.mdx              |  10 +-
 .../docs/examples/destructive-dialog.mdx      |   8 +-
 .../docs/examples/framer-modal-sheet.mdx      |   8 +-
 .../docs/examples/image-grid.mdx              |  10 +-
 .../docs/examples/ios-list.mdx                |  10 +-
 .../docs/examples/loading-progress.mdx        |   2 +-
 .../docs/examples/notifications-popover.mdx   |   8 +-
 .../docs/examples/opacity-slider.mdx          |   4 +-
 .../docs/examples/ripple-button.mdx           |   4 +-
 .../docs/examples/shipping-radio.mdx          |   4 +-
 .../docs/examples/status-select.mdx           |  10 +-
 .../docs/examples/stock-table.mdx             |  14 +-
 .../docs/examples/swipeable-tabs.mdx          |   4 +-
 .../docs/examples/tailwind.config.js          |  18 --
 .../docs/examples/tailwind.global.css         |   7 +-
 .../docs/examples/user-combobox.mdx           |  10 +-
 .../docs/examples/wifi-switch.mdx             |   6 +-
 packages/react-aria-components/package.json   |   3 +
 starters/tailwind/.postcssrc                  |   3 +-
 starters/tailwind/src/Checkbox.tsx            |  10 +-
 starters/tailwind/src/ColorPicker.tsx         |   2 +-
 starters/tailwind/src/ColorSwatch.tsx         |   2 +-
 starters/tailwind/src/ColorSwatchPicker.tsx   |   4 +-
 starters/tailwind/src/ColorWheel.tsx          |   2 +-
 starters/tailwind/src/ComboBox.tsx            |   4 +-
 starters/tailwind/src/DateField.tsx           |   2 +-
 starters/tailwind/src/DatePicker.tsx          |   2 +-
 starters/tailwind/src/DateRangePicker.tsx     |   4 +-
 starters/tailwind/src/Link.tsx                |   2 +-
 starters/tailwind/src/Modal.tsx               |   2 +-
 starters/tailwind/src/RadioGroup.tsx          |   6 +-
 starters/tailwind/src/Select.tsx              |   4 +-
 starters/tailwind/src/Switch.tsx              |   6 +-
 starters/tailwind/src/Table.tsx               |   6 +-
 starters/tailwind/src/ToggleButton.tsx        |   6 +-
 starters/tailwind/src/Tooltip.tsx             |   2 +-
 starters/tailwind/src/index.css               |   6 +-
 starters/tailwind/tailwind.config.js          |  12 -
 yarn.lock                                     | 292 +++++++++++++++++-
 67 files changed, 541 insertions(+), 297 deletions(-)
 delete mode 100644 examples/rac-tailwind/tailwind.config.js
 delete mode 100644 packages/react-aria-components/docs/examples/tailwind.config.js
 delete mode 100644 starters/tailwind/tailwind.config.js

diff --git a/examples/rac-spectrum-tailwind/.postcssrc b/examples/rac-spectrum-tailwind/.postcssrc
index 0985cb2aab0..e092dc7c1ef 100644
--- 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/src/components/GenInputField.tsx b/examples/rac-spectrum-tailwind/src/components/GenInputField.tsx
index 82f2510d583..717d00334c4 100644
--- 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
index a0ffe3ee7b3..0d1482ebead 100644
--- 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
index 3d73eb12679..31e2367f55a 100644
--- 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
index d4d451b8ad4..47da1fd8a54 100644
--- 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
index 00488ea27fa..a10f9c9f9ad 100644
--- 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';
+
+@config '../tailwind.config.js';
 
 * {
   -webkit-tap-highlight-color: transparent;
diff --git a/examples/rac-tailwind/.postcssrc b/examples/rac-tailwind/.postcssrc
index 0985cb2aab0..e092dc7c1ef 100644
--- a/examples/rac-tailwind/.postcssrc
+++ b/examples/rac-tailwind/.postcssrc
@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
 }
diff --git a/examples/rac-tailwind/src/AnimatedCalendar.tsx b/examples/rac-tailwind/src/AnimatedCalendar.tsx
index d6389c374cd..0438a31b480 100644
--- 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>
diff --git a/examples/rac-tailwind/src/App.js b/examples/rac-tailwind/src/App.js
index 319a67f9dc6..a86b5ff0713 100644
--- a/examples/rac-tailwind/src/App.js
+++ b/examples/rac-tailwind/src/App.js
@@ -37,11 +37,11 @@ export function App() {
 
 function MenuExample() {
   return (
-    <div className="bg-gradient-to-r to-blue-500 from-violet-500 p-8 rounded-lg">
+    <div className="bg-linear-to-r to-blue-500 from-violet-500 p-8 rounded-lg">
       <MenuTrigger>
         <OverlayButton aria-label="Menu">☰</OverlayButton>
-        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 data-[entering]:animate-in data-[entering]:fade-in data-[entering]:zoom-in-95 data-[exiting]:animate-out data-[exiting]:fade-out data-[exiting]:zoom-out-95 fill-mode-forwards origin-top-left">
-          <Menu className="outline-none">
+        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 data-entering:animate-in data-entering:fade-in data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out data-exiting:zoom-out-95 fill-mode-forwards origin-top-left">
+          <Menu className="outline-hidden">
             <MyMenuItem id="new">New…</MyMenuItem>
             <MyMenuItem id="open">Open…</MyMenuItem>
             <Separator className="border-b border-b-gray-300 mx-3 my-1" />
@@ -58,28 +58,28 @@ function MenuExample() {
 
 function MyMenuItem(props) {
   return <MenuItem {...props} className={({ isFocused }) => `
-    group flex w-full items-center rounded-md px-3 py-2 sm:text-sm outline-none cursor-default
+    group flex w-full items-center rounded-md px-3 py-2 sm:text-sm outline-hidden cursor-default
     ${isFocused ? 'bg-violet-500 text-white' : 'text-gray-900'}
   `} />;
 }
 
 function OverlayButton(props) {
-  return <Button {...props} className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 sm:text-sm font-medium text-white data-[hovered]:bg-opacity-30 data-[pressed]:bg-opacity-40 transition-colors cursor-default outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-white/75" />;
+  return <Button {...props} className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 sm:text-sm font-medium text-white data-hovered:bg-opacity-30 data-pressed:bg-opacity-40 transition-colors cursor-default outline-hidden data-focus-visible:ring-2 data-focus-visible:ring-white/75" />;
 }
 
 function SelectExample() {
   return (
-    <div className="bg-gradient-to-r from-amber-500 to-rose-500 p-8 rounded-lg flex justify-center">
+    <div className="bg-linear-to-r from-amber-500 to-rose-500 p-8 rounded-lg flex justify-center">
       <Select className="flex flex-col gap-1 w-5/6">
         <Label className="text-sm">Favorite Animal</Label>
-        <Button className="flex relative w-full cursor-default rounded-lg bg-white bg-white bg-opacity-90 data-[pressed]:bg-opacity-100 transition py-2 pl-3 pr-2 text-left shadow-md text-gray-700 focus:outline-none data-[focus-visible]:border-indigo-500 data-[focus-visible]:ring-2 data-[focus-visible]:ring-black sm:text-sm">
-          <SelectValue className="flex-1 truncate data-[placeholder]:italic" />
+        <Button className="flex relative w-full cursor-default rounded-lg bg-white bg-white bg-opacity-90 data-pressed:bg-opacity-100 transition py-2 pl-3 pr-2 text-left shadow-md text-gray-700 focus:outline-hidden data-focus-visible:border-indigo-500 data-focus-visible:ring-2 data-focus-visible:ring-black sm:text-sm">
+          <SelectValue className="flex-1 truncate data-placeholder:italic" />
           <ChevronUpDownIcon
             className="h-5 w-5 text-gray-500"
             aria-hidden="true" />
         </Button>
-        <Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 sm:text-sm data-[entering]:animate-in data-[entering]:fade-in data-[exiting]:animate-out data-[exiting]:fade-out fill-mode-forwards">
-          <ListBox className="outline-none p-1 [--focus-bg:theme(colors.rose.600)]">
+        <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 sm:text-sm data-entering:animate-in data-entering:fade-in data-exiting:animate-out data-exiting:fade-out fill-mode-forwards">
+          <ListBox className="outline-hidden p-1 [--focus-bg:var(--color-rose-600)]">
             <MyListBoxItem>Aardvark</MyListBoxItem>
             <MyListBoxItem>Cat</MyListBoxItem>
             <MyListBoxItem>Dog</MyListBoxItem>
@@ -98,14 +98,14 @@ function MyListBoxItem(props) {
       {...props}
       textValue={props.children}
       className={({isFocused}) => `
-        relative group cursor-default select-none py-2 pl-10 pr-4 outline-none rounded
-        ${isFocused ? 'bg-[--focus-bg] text-white' : 'text-gray-900'}
+        relative group cursor-default select-none py-2 pl-10 pr-4 outline-hidden rounded
+        ${isFocused ? 'bg-(--focus-bg) text-white' : 'text-gray-900'}
       `}>
       {({ isSelected }) => (
         <>
           <span className={`block truncate ${isSelected ? 'font-medium' : 'font-normal'}`}>{props.children}</span>
           {isSelected &&
-            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-[--focus-bg] group-data-[focused]:text-white">
+            <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-(--focus-bg) group-data-focused:text-white">
               <CheckIcon className="h-5 w-5" aria-hidden="true" />
             </span>
           }
@@ -117,19 +117,19 @@ function MyListBoxItem(props) {
 
 function ComboBoxExample() {
   return (
-    <div className="bg-gradient-to-r from-sky-400 to-cyan-400 p-8 rounded-lg flex justify-center">
+    <div className="bg-linear-to-r from-sky-400 to-cyan-400 p-8 rounded-lg flex justify-center">
       <ComboBox className="flex flex-col gap-1 w-5/6">
         <Label className="text-sm text-black">Favorite Animal</Label>
         <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white bg-opacity-90 focus-within:bg-opacity-100 transition text-left shadow-md [&:has([data-focus-visible])]:ring-2 [&:has([data-focus-visible])]:ring-black sm:text-sm">
-          <Input className="w-full border-none py-2 pl-3 pr-10 sm:text-sm leading-5 text-gray-900 bg-transparent outline-none" />
-          <Button className="absolute inset-y-0 right-0 flex items-center px-2 cursor-default transition border-l border-l-sky-200 data-[pressed]:bg-sky-100">
+          <Input className="w-full border-none py-2 pl-3 pr-10 sm:text-sm leading-5 text-gray-900 bg-transparent outline-hidden" />
+          <Button className="absolute inset-y-0 right-0 flex items-center px-2 cursor-default transition border-l border-l-sky-200 data-pressed:bg-sky-100">
             <ChevronUpDownIcon
               className="h-5 w-5 text-gray-500"
               aria-hidden="true" />
           </Button>
         </div>
-        <Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 sm:text-sm data-[exiting]:animate-out data-[exiting]:fade-out fill-mode-forwards duration-100 ease-in">
-          <ListBox className="outline-none p-1 [--focus-bg:theme(colors.sky.600)]">
+        <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 sm:text-sm data-exiting:animate-out data-exiting:fade-out fill-mode-forwards duration-100 ease-in">
+          <ListBox className="outline-hidden p-1 [--focus-bg:var(--color-sky-600)]">
             <MyListBoxItem>Aardvark</MyListBoxItem>
             <MyListBoxItem>Cat</MyListBoxItem>
             <MyListBoxItem>Dog</MyListBoxItem>
@@ -144,7 +144,7 @@ function ComboBoxExample() {
 
 function TabsExample() {
   return (
-    <div className="bg-gradient-to-r from-lime-500 to-emerald-500 p-8 rounded-lg">
+    <div className="bg-linear-to-r from-lime-500 to-emerald-500 p-8 rounded-lg">
       <Tabs>
         <TabList aria-label="Feeds" className="flex space-x-1 rounded-full bg-green-900/40 bg-clip-padding p-1 border border-white/30">
           <MyTab id="blog">Blog</MyTab>
@@ -182,15 +182,15 @@ function MyTab(props) {
     <Tab
       {...props}
       className={({isSelected, isFocusVisible}) => `
-        w-full rounded-full py-2.5 sm:text-sm font-medium leading-5 text-center cursor-default ring-black outline-none transition-colors
+        w-full rounded-full py-2.5 sm:text-sm font-medium leading-5 text-center cursor-default ring-black outline-hidden transition-colors
         ${isFocusVisible ? 'ring-2' : ''}
-        ${isSelected ? 'text-emerald-700 bg-white shadow' : 'text-lime-50 data-[hovered]:bg-white/[0.12] data-[hovered]:text-white data-[pressed]:bg-white/[0.12] data-[pressed]:text-white'}
+        ${isSelected ? 'text-emerald-700 bg-white shadow-sm' : 'text-lime-50 data-hovered:bg-white/[0.12] data-hovered:text-white data-pressed:bg-white/[0.12] data-pressed:text-white'}
       `} />
   );
 }
 
 function MyTabPanel(props) {
-  return <TabPanel {...props} className="mt-2 text-gray-700 font-serif rounded-2xl bg-white p-2 shadow ring-black focus:outline-none data-[focus-visible]:ring-2" />;
+  return <TabPanel {...props} className="mt-2 text-gray-700 font-serif rounded-2xl bg-white p-2 shadow-sm ring-black focus:outline-hidden data-focus-visible:ring-2" />;
 }
 
 function Article({title, summary}) {
@@ -204,7 +204,7 @@ function Article({title, summary}) {
 
 function RadioGroupExample() {
   return (
-    <div className="bg-gradient-to-r from-blue-300 to-indigo-300 p-8 rounded-lg">
+    <div className="bg-linear-to-r from-blue-300 to-indigo-300 p-8 rounded-lg">
       <RadioGroup className="space-y-2" defaultValue="Standard">
         <Label className="text-xl text-slate-900 font-semibold font-serif">Shipping</Label>
         <MyRadio name="Standard" time="4-10 business days" price="$4.99" />
@@ -218,7 +218,7 @@ function RadioGroupExample() {
 function MyRadio({name, time, price}) {
   return (
     <Radio value={name} className={({isFocusVisible, isSelected, isPressed}) => `
-      relative flex cursor-default rounded-lg px-4 py-3 shadow-lg focus:outline-none bg-clip-padding border border-transparent
+      relative flex cursor-default rounded-lg px-4 py-3 shadow-lg focus:outline-hidden bg-clip-padding border border-transparent
       ${isFocusVisible ? 'ring-2 ring-blue-600 ring-offset-1 ring-offset-white/80' : ''}
       ${isSelected ? 'bg-blue-600 border-white/30 text-white' : ''}
       ${isPressed && !isSelected ? 'bg-blue-50' : ''}
@@ -244,7 +244,7 @@ function MyRadio({name, time, price}) {
 
 function ModalExample() {
   return (
-    <div className="bg-gradient-to-r from-sky-400 to-indigo-500 p-8 rounded-lg flex items-center justify-center">
+    <div className="bg-linear-to-r from-sky-400 to-indigo-500 p-8 rounded-lg flex items-center justify-center">
       <DialogTrigger>
         <OverlayButton>Open dialog</OverlayButton>
         <ModalOverlay className={({isEntering, isExiting}) => `
@@ -257,7 +257,7 @@ function ModalExample() {
             ${isEntering ? 'animate-in fade-in zoom-in-95 ease-out duration-300 fill-mode-forwards' : ''}
             ${isExiting ? 'animate-out fade-out zoom-out-95 ease-in duration-200 fill-mode-forwards' : ''}
           `}>
-            <Dialog role="alertdialog" className="outline-none relative">
+            <Dialog role="alertdialog" className="outline-hidden relative">
               {({ close }) => (<>
                 <Heading className="text-xl font-semibold leading-6 text-slate-700">Delete folder</Heading>
                 <ExclamationTriangleIcon className="w-6 h-6 text-red-500 absolute right-0 top-0 stroke-2" />
@@ -266,13 +266,13 @@ function ModalExample() {
                 </p>
                 <div className="mt-6 flex justify-end gap-2">
                   <DialogButton
-                    className="bg-slate-200 text-slate-800 data-[hovered]:border-slate-300 data-[pressed]:bg-slate-300"
+                    className="bg-slate-200 text-slate-800 data-hovered:border-slate-300 data-pressed:bg-slate-300"
                     onPress={close}
                   >
                     Cancel
                   </DialogButton>
                   <DialogButton
-                    className="bg-red-500 text-white data-[hovered]:border-red-600 data-[pressed]:bg-red-600"
+                    className="bg-red-500 text-white data-hovered:border-red-600 data-pressed:bg-red-600"
                     onPress={close}
                   >
                     Delete
@@ -288,12 +288,12 @@ function ModalExample() {
 }
 
 function DialogButton({className, ...props}) {
-  return <Button {...props} className={`inline-flex justify-center rounded-md border border-transparent px-5 py-2 text-sm font-medium transition-colors cursor-default outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-blue-500 data-[focus-visible]:ring-offset-2 ${className}`} />;
+  return <Button {...props} className={`inline-flex justify-center rounded-md border border-transparent px-5 py-2 text-sm font-medium transition-colors cursor-default outline-hidden data-focus-visible:ring-2 data-focus-visible:ring-blue-500 data-focus-visible:ring-offset-2 ${className}`} />;
 }
 
 function PopoverExample() {
   return (
-    <div className="bg-gradient-to-r from-orange-400 to-pink-600 p-8 rounded-lg flex items-start justify-center">
+    <div className="bg-linear-to-r from-orange-400 to-pink-600 p-8 rounded-lg flex items-start justify-center">
       <DialogTrigger>
         <OverlayButton aria-label="Notifications">
           <BellIcon className="w-5 h-5 text-white" aria-hidden="true" />
@@ -304,7 +304,7 @@ function PopoverExample() {
               <path d="M0 0,L6 6,L12 0" />
             </svg>
           </OverlayArrow>
-          <Dialog className="p-2 outline-none text-gray-700">
+          <Dialog className="p-2 outline-hidden text-gray-700">
             <div className="flex flex-col">
               <Notification avatar={people[4].avatar} name={people[4].name} time="2h" text="This looks great! Let's ship it." />
               <Notification avatar={people[1].avatar} name={people[1].name} time="4h" text="Can you add a bit more pizzazz?" />
@@ -343,10 +343,10 @@ function Notification({avatar, name, time, text}) {
 
 function SwitchExample() {
   return (
-    <div className="bg-gradient-to-r from-yellow-300 to-orange-300 p-8 rounded-lg flex items-center justify-center">
+    <div className="bg-linear-to-r from-yellow-300 to-orange-300 p-8 rounded-lg flex items-center justify-center">
       <Switch className="group flex gap-2 items-center text-black font-semibold text-sm">
-        <div className="inline-flex h-[26px] w-[44px] shrink-0 cursor-default rounded-full shadow-inner bg-clip-padding border border-white/30 p-[3px] transition-colors duration-200 ease-in-out bg-yellow-600 group-data-[pressed]:bg-yellow-700 group-data-[selected]:bg-amber-800 group-data-[selected]:group-data-[pressed]:bg-amber-900 focus:outline-none group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-black">
-          <span className="h-[18px] w-[18px] transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-0 group-data-[selected]:translate-x-[100%]" />
+        <div className="inline-flex h-[26px] w-[44px] shrink-0 cursor-default rounded-full shadow-inner bg-clip-padding border border-white/30 p-[3px] transition-colors duration-200 ease-in-out bg-yellow-600 group-data-pressed:bg-yellow-700 group-data-selected:bg-amber-800 group-data-pressed:group-data-selected:bg-amber-900 focus:outline-hidden group-data-focus-visible:ring-2 group-data-focus-visible:ring-black">
+          <span className="h-[18px] w-[18px] transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out translate-x-0 group-data-selected:translate-x-[100%]" />
         </div>
         Wi-Fi
       </Switch>
@@ -356,7 +356,7 @@ function SwitchExample() {
 
 function SliderExample() {
   return (
-    <div className="bg-gradient-to-r from-purple-500 to-pink-500 p-8 rounded-lg flex items-center justify-center">
+    <div className="bg-linear-to-r from-purple-500 to-pink-500 p-8 rounded-lg flex items-center justify-center">
       <Slider defaultValue={30} className="w-5/6">
         <div className="flex sm:text-sm">
           <Label className="flex-1">Opacity</Label>
@@ -366,7 +366,7 @@ function SliderExample() {
           {({state}) => <>
             <div className="absolute h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white bg-opacity-40" />
             <div className="absolute h-2 top-[50%] transform translate-y-[-50%] rounded-full bg-white" style={{width: state.getThumbPercent(0) * 100 + '%'}} />
-            <SliderThumb className="h-7 w-7 top-[50%] rounded-full border border-purple-800/75 bg-white transition-colors data-[dragging]:bg-purple-100 outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-black" />
+            <SliderThumb className="h-7 w-7 top-[50%] rounded-full border border-purple-800/75 bg-white transition-colors data-dragging:bg-purple-100 outline-hidden data-focus-visible:ring-2 data-focus-visible:ring-black" />
           </>}
         </SliderTrack>
       </Slider>
@@ -376,7 +376,7 @@ function SliderExample() {
 
 function ProgressBarExample() {
   return (
-    <div className="bg-gradient-to-r from-blue-500 to-purple-500 p-8 rounded-lg flex items-center justify-center">
+    <div className="bg-linear-to-r from-blue-500 to-purple-500 p-8 rounded-lg flex items-center justify-center">
       <ProgressBar value={30} className="flex flex-col gap-3 w-56 text-sm">
         {({percentage, valueText}) => <>
           <div className="flex">
@@ -394,14 +394,14 @@ function ProgressBarExample() {
 
 function DatePickerExample() {
   return (
-    <div className="bg-gradient-to-r from-violet-500 to-fuchsia-600 p-8 rounded-lg flex items-start justify-center">
+    <div className="bg-linear-to-r from-violet-500 to-fuchsia-600 p-8 rounded-lg flex items-start justify-center">
       <DatePicker className="flex flex-col gap-1 w-5/6">
         <Label className="text-sm">Date</Label>
-        <Group className="flex rounded-lg bg-white/90 focus-within:bg-white [&:has([data-pressed])]:bg-white transition pl-3 text-left shadow-md text-gray-700 focus:outline-none data-[focus-visible]:[&:not(:has(button[data-focus-visible]))]:ring-2 data-[focus-visible]:ring-black">
+        <Group className="flex rounded-lg bg-white/90 focus-within:bg-white [&:has([data-pressed])]:bg-white transition pl-3 text-left shadow-md text-gray-700 focus:outline-hidden data-focus-visible:[&:not(:has(button[data-focus-visible]))]:ring-2 data-focus-visible:ring-black">
           <DateInput className="flex flex-1 py-2 sm:text-sm input">
-            {(segment) => <DateSegment segment={segment} className="px-0.5 box-content tabular-nums text-right outline-none rounded-sm focus:bg-violet-700 focus:text-white group caret-transparent data-[placeholder]:italic" />}
+            {(segment) => <DateSegment segment={segment} className="px-0.5 box-content tabular-nums text-right outline-hidden rounded-xs focus:bg-violet-700 focus:text-white group caret-transparent data-placeholder:italic" />}
           </DateInput>
-          <Button className="cursor-default outline-none px-2 transition border-l border-l-purple-200 rounded-r-lg data-[pressed]:bg-purple-100 data-[focus-visible]:ring-2 data-[focus-visible]:ring-black">
+          <Button className="cursor-default outline-hidden px-2 transition border-l border-l-purple-200 rounded-r-lg data-pressed:bg-purple-100 data-focus-visible:ring-2 data-focus-visible:ring-black">
             <ChevronUpDownIcon
               className="h-5 w-5 text-gray-500"
               aria-hidden="true" />
@@ -419,8 +419,8 @@ function DatePickerExample() {
 
 function ContactListExample() {
   return (
-    <div className="bg-gradient-to-r from-blue-500 to-sky-500 p-8 rounded-lg flex justify-center">
-      <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pb-2 scroll-pt-7">
+    <div className="bg-linear-to-r from-blue-500 to-sky-500 p-8 rounded-lg flex justify-center">
+      <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-hidden bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow-sm scroll-pb-2 scroll-pt-7">
         <ContactSection title="Favorites">
           <Contact id="wade" name="Tony Baldwin" handle="@tony" avatar="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
           <Contact id="arelene" name="Julienne Langstrath" handle="@jlangstrath" avatar="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
@@ -447,7 +447,7 @@ function ContactSection({title, children, items}) {
 
 function Contact({id, avatar, name, handle}) {
   return (
-    <ListBoxItem id={id} textValue={name} className="group peer relative py-1 px-2 text-sm outline-none cursor-default grid grid-rows-2 grid-flow-col auto-cols-max gap-x-3 rounded aria-selected:bg-blue-500 text-slate-700 aria-selected:text-white aria-selected:[&:has(+[aria-selected=true])]:rounded-b-none aria-selected:peer-aria-selected:rounded-t-none data-[focus-visible]:ring-2 ring-offset-2 ring-blue-500 [&[aria-selected=false]:has(+[aria-selected=false])_.divider]:block [&[aria-selected=true]:has(+[aria-selected=true])_.divider]:block">
+    <ListBoxItem id={id} textValue={name} className="group peer relative py-1 px-2 text-sm outline-hidden cursor-default grid grid-rows-2 grid-flow-col auto-cols-max gap-x-3 rounded-sm aria-selected:bg-blue-500 text-slate-700 aria-selected:text-white [&:has(+[aria-selected=true])]:aria-selected:rounded-b-none peer-aria-selected:aria-selected:rounded-t-none data-focus-visible:ring-2 ring-offset-2 ring-blue-500 [&[aria-selected=false]:has(+[aria-selected=false])_.divider]:block [&[aria-selected=true]:has(+[aria-selected=true])_.divider]:block">
       <img src={avatar} alt="" className="row-span-2 place-self-center h-8 w-8 rounded-full" />
       <Text slot="label" className="font-medium truncate">{name}</Text>
       <Text slot="description" className="truncate text-xs text-slate-600 group-aria-selected:text-white">{handle}</Text>
@@ -471,11 +471,11 @@ function ImageGridExample() {
   });
 
   return (
-    <div className="bg-gradient-to-r from-sky-500 to-teal-500 p-8 rounded-lg flex justify-center">
-      <ListBox aria-label="Images" items={list.items} selectionMode="single" selectionBehavior="replace" className="max-h-[280px] overflow-auto outline-none bg-white rounded-lg shadow p-2 grid grid-cols-3 gap-2">
+    <div className="bg-linear-to-r from-sky-500 to-teal-500 p-8 rounded-lg flex justify-center">
+      <ListBox aria-label="Images" items={list.items} selectionMode="single" selectionBehavior="replace" className="max-h-[280px] overflow-auto outline-hidden bg-white rounded-lg shadow-sm p-2 grid grid-cols-3 gap-2">
         {item => (
-          <ListBoxItem textValue={item.user.name} className="rounded outline-none group cursor-default">
-            <img src={item.urls.regular} alt={item.alt_description} className="w-full h-[80px] object-cover rounded group-aria-selected:ring group-aria-selected:ring-2 group-aria-selected:ring-offset-2 group-aria-selected:ring-sky-600" />
+          <ListBoxItem textValue={item.user.name} className="rounded-sm outline-hidden group cursor-default">
+            <img src={item.urls.regular} alt={item.alt_description} className="w-full h-[80px] object-cover rounded-sm group-aria-selected:ring-3 group-aria-selected:ring-2 group-aria-selected:ring-offset-2 group-aria-selected:ring-sky-600" />
             <Text slot="label" className="text-[11px] text-gray-700 font-semibold overflow-hidden text-ellipsis whitespace-nowrap max-w-full block mt-1">{item.user.name}</Text>
           </ListBoxItem>
         )}
@@ -499,8 +499,8 @@ function TableExample() {
   }, [sortDescriptor]);
 
   return (
-    <div className="bg-gradient-to-r from-indigo-500 to-violet-500 p-8 rounded-lg flex items-center justify-center md:col-span-2">
-      <div className="max-h-[280px] overflow-auto scroll-pt-[2.321rem] relative bg-white rounded-lg shadow text-gray-600">
+    <div className="bg-linear-to-r from-indigo-500 to-violet-500 p-8 rounded-lg flex items-center justify-center md:col-span-2">
+      <div className="max-h-[280px] overflow-auto scroll-pt-[2.321rem] relative bg-white rounded-lg shadow-sm text-gray-600">
         <Table aria-label="Stocks" selectionMode="single" selectionBehavior="replace" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor} className="border-separate border-spacing-0">
           <TableHeader>
             <StockColumn id="symbol" allowsSorting>Symbol</StockColumn>
@@ -512,7 +512,7 @@ function TableExample() {
           <TableBody items={sortedItems}>
             {item => (
               <StockRow>
-                <StockCell><span className="font-mono bg-slate-100 border border-slate-200 rounded px-1 group-aria-selected:bg-slate-700 group-aria-selected:border-slate-800">${item.symbol}</span></StockCell>
+                <StockCell><span className="font-mono bg-slate-100 border border-slate-200 rounded-sm px-1 group-aria-selected:bg-slate-700 group-aria-selected:border-slate-800">${item.symbol}</span></StockCell>
                 <StockCell className="font-semibold">{item.name}</StockCell>
                 <StockCell>{item.marketCap}</StockCell>
                 <StockCell>{item.sector}</StockCell>
@@ -528,7 +528,7 @@ function TableExample() {
 
 function StockColumn(props) {
   return (
-    <Column {...props} className="sticky top-0 border-b border-slate-300 bg-slate-200 px-4 py-2 font-bold text-sm text-left cursor-default first:rounded-tl-lg last:rounded-tr-lg whitespace-nowrap outline-none data-[focus-visible]:outline data-[focus-visible]:outline-2 data-[focus-visible]:outline-slate-600 data-[focus-visible]:-outline-offset-4">
+    <Column {...props} className="sticky top-0 border-b border-slate-300 bg-slate-200 px-4 py-2 font-bold text-sm text-left cursor-default first:rounded-tl-lg last:rounded-tr-lg whitespace-nowrap outline-hidden data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-slate-600 data-focus-visible:-outline-offset-4">
       {({allowsSorting, sortDirection}) => (
         <span className="flex items-center">
           {props.children}
@@ -544,26 +544,26 @@ function StockColumn(props) {
 }
 
 function StockRow(props) {
-  return <Row {...props} className="even:bg-slate-100 aria-selected:bg-slate-600 aria-selected:text-white cursor-default group outline-none data-[focus-visible]:outline data-[focus-visible]:outline-2 data-[focus-visible]:outline-slate-600 data-[focus-visible]:-outline-offset-4 aria-selected:data-[focus-visible]:outline-white" />;
+  return <Row {...props} className="even:bg-slate-100 aria-selected:bg-slate-600 aria-selected:text-white cursor-default group outline-hidden data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-slate-600 data-focus-visible:-outline-offset-4 aria-selected:data-focus-visible:outline-white" />;
 }
 
 function StockCell(props) {
-  return <Cell {...props} className={`px-4 py-2 text-sm ${props.className} data-[focus-visible]:outline data-[focus-visible]:outline-2 data-[focus-visible]:outline-slate-600 data-[focus-visible]:-outline-offset-4 group-aria-selected:data-[focus-visible]:outline-white`} />;
+  return <Cell {...props} className={`px-4 py-2 text-sm ${props.className} data-focus-visible:outline data-focus-visible:outline-2 data-focus-visible:outline-slate-600 data-focus-visible:-outline-offset-4 data-focus-visible:group-aria-selected:outline-white`} />;
 }
 
 function AutocompleteExample() {
   let {contains} = useFilter({sensitivity: 'base'});
   return (
-    <div className="bg-gradient-to-r from-sky-400 to-cyan-400 p-8 rounded-lg flex justify-center flex-col">
+    <div className="bg-linear-to-r from-sky-400 to-cyan-400 p-8 rounded-lg flex justify-center flex-col">
       <Autocomplete filter={contains} className="flex flex-col gap-1 w-5/6">
         <SearchField>
           <Label className="text-sm text-black">Contacts</Label>
           <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white bg-opacity-90 focus-within:bg-opacity-100 transition text-left shadow-md [&:has([data-focus-visible])]:ring-2 [&:has([data-focus-visible])]:ring-black sm:text-sm">
-            <Input className="w-full border-none py-2 pl-3 pr-2 sm:text-sm leading-5 text-gray-900 bg-transparent outline-none" />
+            <Input className="w-full border-none py-2 pl-3 pr-2 sm:text-sm leading-5 text-gray-900 bg-transparent outline-hidden" />
           </div>
         </SearchField>
         <div className="h-[300px] py-2 rounded-lg flex justify-center">
-          <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pb-2 scroll-pt-7">
+          <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-hidden bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow-sm scroll-pb-2 scroll-pt-7">
             <ContactSection title="Favorites">
               <Contact id="wade" name="Tony Baldwin" handle="@tony" avatar="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
               <Contact id="arelene" name="Julienne Langstrath" handle="@jlangstrath" avatar="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" />
diff --git a/examples/rac-tailwind/src/style.css b/examples/rac-tailwind/src/style.css
index 00488ea27fa..a10f9c9f9ad 100644
--- a/examples/rac-tailwind/src/style.css
+++ b/examples/rac-tailwind/src/style.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.js';
 
 * {
   -webkit-tap-highlight-color: transparent;
diff --git a/examples/rac-tailwind/tailwind.config.js b/examples/rac-tailwind/tailwind.config.js
deleted file mode 100644
index 70e8497ccf0..00000000000
--- a/examples/rac-tailwind/tailwind.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-     "./src/**/*.{html,js,ts,jsx,tsx}",
-   ],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    require("tailwindcss-animate")
-  ],
-}
diff --git a/package.json b/package.json
index 9597aa79727..839b4e244d0 100644
--- a/package.json
+++ b/package.json
@@ -203,7 +203,7 @@
     "storybook-dark-mode": "^3.0.3",
     "storybook-react-parcel": "^0.0.1",
     "tailwind-variants": "^0.1.18",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
     "typescript": "^5.5.0",
diff --git a/packages/dev/docs/pages/react-aria/.postcssrc b/packages/dev/docs/pages/react-aria/.postcssrc
index 0985cb2aab0..e092dc7c1ef 100644
--- a/packages/dev/docs/pages/react-aria/.postcssrc
+++ b/packages/dev/docs/pages/react-aria/.postcssrc
@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
 }
diff --git a/packages/dev/docs/pages/react-aria/components.mdx b/packages/dev/docs/pages/react-aria/components.mdx
index d16f953fa8b..cbaef607044 100644
--- a/packages/dev/docs/pages/react-aria/components.mdx
+++ b/packages/dev/docs/pages/react-aria/components.mdx
@@ -500,7 +500,7 @@ order: 5
 <ExampleCard
   url="useFocusRing.html"
   title="useFocusRing"
-  description="A focus ring is an indication of the active element when interacting with a keyboard.">
+  description="A focus ring-3 is an indication of the active element when interacting with a keyboard.">
   <FocusRing />
 </ExampleCard>
 
diff --git a/packages/dev/docs/pages/react-aria/home.global.css b/packages/dev/docs/pages/react-aria/home.global.css
index ebf5cea538c..1f90bab4019 100644
--- a/packages/dev/docs/pages/react-aria/home.global.css
+++ b/packages/dev/docs/pages/react-aria/home.global.css
@@ -9,15 +9,12 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+@import 'tailwindcss';
+
 @config "./tailwind.config.js";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-@layer utilities {
-  .focus-ring {
-    @apply outline outline-0 outline-blue-600 dark:outline-blue-500 focus-visible:outline-2;
-  }
+@utility focus-ring {
+  @apply outline outline-0 outline-blue-600 dark:outline-blue-500 focus-visible:outline-2;
 }
 
 @font-face {
@@ -56,7 +53,7 @@ body {
   font-family: "adobe-clean", system-ui, sans-serif;
   background: var(--page-bg);
   color-scheme: dark light;
-  @apply [--page-bg:theme(colors.zinc.50)] dark:[--page-bg:theme(colors.zinc.900)];
+  @apply [--page-bg:var(--color-zinc-50)] dark:[--page-bg:var(--color-zinc-900)];
 }
 
 @media (min-resolution: 200dpi) {
@@ -246,7 +243,7 @@ pre.small {
   }
 }
 
-@keyframes switch-animation {
+/* @keyframes switch-animation {
   0%, 16% {
     @apply ml-6 w-8;
   }
@@ -282,7 +279,7 @@ pre.small {
   88.5%, 100% {
     @apply ml-6 w-8;
   }
-}
+} */
 
 @keyframes switch-background-animation {
   0%, 36.5% {
@@ -354,7 +351,7 @@ pre.small {
       right: 0;
       height: 0.99lh;
       opacity: 0;
-      @apply rounded bg-red-600/[15%] dark:bg-red-600/20;
+      @apply rounded-sm bg-red-600/[15%] dark:bg-red-600/20;
       animation: highlight 5s infinite var(--delay, 0s);
     }
   }
diff --git a/packages/dev/docs/pages/react-aria/home/A11y.tsx b/packages/dev/docs/pages/react-aria/home/A11y.tsx
index 3512ee88799..73a14913dd5 100644
--- a/packages/dev/docs/pages/react-aria/home/A11y.tsx
+++ b/packages/dev/docs/pages/react-aria/home/A11y.tsx
@@ -207,13 +207,13 @@ export function A11y() {
         ), document.body)}
         <Select className="group flex flex-col gap-1" selectedKey={selectedKey} onSelectionChange={cursorRect ? undefined : setSelectedKey} isOpen={isOpen} onOpenChange={cursorRect ? undefined : setOpen}>
           <Label>Permissions</Label>
-          <Button className="flex items-center text-start gap-4 w-full cursor-default border border-black/10 dark:border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none rounded-lg pl-3 pr-2 py-2 min-w-[150px] transition bg-gray-50 hover:bg-gray-100 pressed:bg-gray-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:pressed:bg-zinc-500 group-invalid:border-red-600 disabled:text-gray-200 dark:disabled:text-zinc-600 outline-none focus-visible:outline-blue-600 dark:focus-visible:outline-blue-500 outline-offset-2">
+          <Button className="flex items-center text-start gap-4 w-full cursor-default border border-black/10 dark:border-white/10 shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none rounded-lg pl-3 pr-2 py-2 min-w-[150px] transition bg-gray-50 hover:bg-gray-100 pressed:bg-gray-200 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:pressed:bg-zinc-500 group-invalid:border-red-600 disabled:text-gray-200 dark:disabled:text-zinc-600 outline-hidden focus-visible:outline-blue-600 dark:focus-visible:outline-blue-500 outline-offset-2">
             <SelectValue className="flex-1 text-sm text-gray-800 dark:text-zinc-300 placeholder-shown:italic" />
             <ChevronDown className="w-4 h-4 text-gray-600 dark:text-zinc-400" />
           </Button>
-          <Popover isNonModal={!!cursorRect} className="min-w-[--trigger-width]">
+          <Popover isNonModal={!!cursorRect} className="min-w-(--trigger-width)">
             {/* @ts-ignore - prevent DOM focus from moving into listbox during animation */}
-            <ListBox shouldUseVirtualFocus={!!cursorRect} className="outline-none p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]">
+            <ListBox shouldUseVirtualFocus={!!cursorRect} className="outline-hidden p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]">
               <SelectItem id="read">Read Only</SelectItem>
               <SelectItem id="edit">Edit</SelectItem>
               <SelectItem id="admin">Admin</SelectItem>
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index 3b3085ddc7c..df548eee7f9 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -178,7 +178,7 @@ export function ExampleApp() {
         <SearchField aria-label="Search" value={search} onChange={setSearch} className="col-span-3 sm:col-span-1" />
         <DialogTrigger>
           <TooltipTrigger>
-            <Button aria-label="Filters" variant="secondary" className="w-9 h-9 flex-shrink-0 p-0 relative">
+            <Button aria-label="Filters" variant="secondary" className="w-9 h-9 shrink-0 p-0 relative">
               <FilterIcon aria-hidden className="inline w-5 h-5" />
               {filters > 0 && <div className="absolute -top-2 -right-2 rounded-full h-4 aspect-square text-white text-xs bg-blue-600">{filters}</div>}
             </Button>
@@ -191,8 +191,8 @@ export function ExampleApp() {
               <div className="flex flex-col gap-4">
                 <Checkbox isSelected={favorite} onChange={setFavorite}>Favorite</Checkbox>
                 <TagGroup label="Cycle" selectionMode="multiple" selectedKeys={cycles} onSelectionChange={setCycles}>
-                  <Tag id="Annual" color="green" textValue="Annual"><RefreshCw className="w-4 h-4 flex-shrink-0" /> Annual</Tag>
-                  <Tag id="Perennial" color="green" textValue="Perennial"><RefreshCw className="w-4 h-4 flex-shrink-0" /> Perennial</Tag>
+                  <Tag id="Annual" color="green" textValue="Annual"><RefreshCw className="w-4 h-4 shrink-0" /> Annual</Tag>
+                  <Tag id="Perennial" color="green" textValue="Perennial"><RefreshCw className="w-4 h-4 shrink-0" /> Perennial</Tag>
                 </TagGroup>
                 <TagGroup label="Sunlight" selectionMode="multiple" selectedKeys={sunlight} onSelectionChange={setSunlight}>
                   <Tag id="full sun" color="yellow" textValue="Full Sun">{sunIcons['full sun']} Full Sun</Tag>
@@ -210,7 +210,7 @@ export function ExampleApp() {
         </DialogTrigger>
         <MenuTrigger>
           <TooltipTrigger>
-            <Button aria-label="Columns" variant="secondary" className="w-9 h-9 flex-shrink-0 p-0 hidden sm:block">
+            <Button aria-label="Columns" variant="secondary" className="w-9 h-9 shrink-0 p-0 hidden sm:block">
               <SlidersIcon aria-hidden className="inline w-5 h-5" />
             </Button>
             <Tooltip>Columns</Tooltip>
@@ -223,7 +223,7 @@ export function ExampleApp() {
           </Menu>
         </MenuTrigger>
         <DialogTrigger>
-          <Button aria-label="Add plant" variant="secondary" className="w-9 h-9 flex-shrink-0 p-0 col-start-5">
+          <Button aria-label="Add plant" variant="secondary" className="w-9 h-9 shrink-0 p-0 col-start-5">
             <PlusIcon aria-hidden className="inline w-5 h-5" />
           </Button>
           <PlantModal>
@@ -236,7 +236,7 @@ export function ExampleApp() {
           {item => (
             <GridListItem textValue={item.common_name}>
               <div className="grid grid-cols-[40px_1fr_auto] gap-x-2 w-full">
-                <img alt="" src={item.default_image?.thumbnail} className="inline rounded row-span-3 object-contain h-[40px]" />
+                <img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-3 object-contain h-[40px]" />
                 <span className="truncate capitalize">{item.common_name}</span>
                 <span className="truncate text-xs text-gray-600 dark:text-zinc-400 col-start-2 row-start-2">{item.scientific_name}</span>
                 <MenuTrigger>
@@ -282,7 +282,7 @@ export function ExampleApp() {
                       return (
                         <Cell textValue={item.common_name}>
                           <div className="grid grid-cols-[40px_1fr] gap-x-2">
-                            <img alt="" src={item.default_image?.thumbnail} className="inline rounded row-span-2 object-contain h-[40px]" />
+                            <img alt="" src={item.default_image?.thumbnail} className="inline rounded-sm row-span-2 object-contain h-[40px]" />
                             <span className="truncate capitalize">{item.common_name}</span>
                             <span className="truncate text-xs text-gray-600 dark:text-zinc-400">{item.scientific_name}</span>
                           </div>
@@ -351,15 +351,15 @@ function Label({color, icon, children}: {color: keyof typeof labelStyles, icon:
   return <span className={`${labelStyles[color]} text-xs rounded-full border px-2 flex items-center max-w-fit gap-1`}>{icon} <span className="truncate capitalize">{children}</span></span>;
 }
 
-const cycleIcon = <RefreshCw aria-hidden="true" className="w-4 h-4 flex-shrink-0" />;
+const cycleIcon = <RefreshCw aria-hidden="true" className="w-4 h-4 shrink-0" />;
 function CycleLabel({cycle}: {cycle: string}) {
   return <Label color="green" icon={cycleIcon}>{cycle}</Label>;
 }
 
 const sunIcons: Record<string, ReactElement> = {
-  'full sun': <Sun aria-hidden="true" className="w-4 h-4 flex-shrink-0" />,
-  'part sun': <SunDim aria-hidden="true" className="w-4 h-4 flex-shrink-0" />,
-  'part shade': <CloudSun aria-hidden="true" className="w-4 h-4 flex-shrink-0" />
+  'full sun': <Sun aria-hidden="true" className="w-4 h-4 shrink-0" />,
+  'part sun': <SunDim aria-hidden="true" className="w-4 h-4 shrink-0" />,
+  'part shade': <CloudSun aria-hidden="true" className="w-4 h-4 shrink-0" />
 };
 
 const sunColors: Record<string, keyof typeof labelStyles> = {
@@ -377,9 +377,9 @@ function getSunlight(item: Plant) {
 }
 
 const wateringIcons: Record<string, ReactElement> = {
-  'Frequent': <Droplets aria-hidden="true" className="w-4 h-4 flex-shrink-0" />,
-  'Average': <Droplet aria-hidden="true" className="w-4 h-4 flex-shrink-0" />,
-  'Minimum': <Dessert aria-hidden="true" className="w-4 h-4 flex-shrink-0" />
+  'Frequent': <Droplets aria-hidden="true" className="w-4 h-4 shrink-0" />,
+  'Average': <Droplet aria-hidden="true" className="w-4 h-4 shrink-0" />,
+  'Minimum': <Dessert aria-hidden="true" className="w-4 h-4 shrink-0" />
 };
 
 const wateringColors: Record<string, keyof typeof labelStyles> = {
@@ -425,7 +425,7 @@ function PlantDialog({item, onSave}: {item?: Plant | null, onSave: (item: Plant)
                     setDroppedImage(URL.createObjectURL(await item.getFile()));
                   }
                 }}
-                className="w-24 sm:w-32 p-2 flex items-center justify-center flex-shrink-0 border-2 border-gray-400 border-dashed rounded-xl text-gray-500 dark:text-gray-300 focus-visible:border-blue-600 forced-colors:focus-visible:border-[Highlight] focus-visible:border-solid drop-target:border-blue-600 forced-colors:drop-target:border-[Highlight] drop-target:border-solid drop-target:bg-blue-200 dark:drop-target:bg-blue-800/60 drop-target:text-blue-600 dark:drop-target:text-blue-300">
+                className="w-24 sm:w-32 p-2 flex items-center justify-center shrink-0 border-2 border-gray-400 border-dashed rounded-xl text-gray-500 dark:text-gray-300 focus-visible:border-blue-600 forced-colors:focus-visible:border-[Highlight] focus-visible:border-solid drop-target:border-blue-600 forced-colors:drop-target:border-[Highlight] drop-target:border-solid drop-target:bg-blue-200 dark:drop-target:bg-blue-800/60 drop-target:text-blue-600 dark:drop-target:text-blue-300">
                 {droppedImage
                   ? <img alt="" src={droppedImage} className="w-full h-full object-contain aspect-square" />
                   : <Text slot="label" className="italic text-sm text-center">Drop or paste image here</Text>
@@ -505,7 +505,7 @@ function PlantModal(props: ModalOverlayProps) {
     <ModalOverlay
       {...props}
       className={({isEntering, isExiting}) => `
-      fixed top-0 left-0 w-full h-[--visual-viewport-height] isolate z-20 bg-black/[15%] flex items-center justify-center p-4 text-center backdrop-blur-lg
+      fixed top-0 left-0 w-full h-(--visual-viewport-height) isolate z-20 bg-black/[15%] flex items-center justify-center p-4 text-center backdrop-blur-lg
       ${isEntering ? 'animate-in fade-in duration-200 ease-out' : ''}
       ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''}
     `}>
@@ -513,7 +513,7 @@ function PlantModal(props: ModalOverlayProps) {
         {!isResized &&
           <div
             data-react-aria-top-layer="true"
-            className={`fixed top-0 left-0 w-full h-[--visual-viewport-height] z-30 hidden sm:flex items-center justify-center pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none
+            className={`fixed top-0 left-0 w-full h-(--visual-viewport-height) z-30 hidden sm:flex items-center justify-center pointer-events-none [filter:drop-shadow(0_0_3px_white)] dark:filter-none
               ${isEntering ? 'animate-in zoom-in-105 ease-out duration-200' : ''}
               ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
             `}>
@@ -543,7 +543,7 @@ function PlantModal(props: ModalOverlayProps) {
 
 const favoriteButtonStyles = tv({
   extend: focusRing,
-  base: 'group cursor-default align-middle rounded',
+  base: 'group cursor-default align-middle rounded-sm',
   variants: {
     isSelected: {
       false: 'text-gray-500 dark:text-zinc-400 pressed:text-gray-600 dark:pressed:text-zinc-300',
diff --git a/packages/dev/docs/pages/react-aria/home/KanbanExample.tsx b/packages/dev/docs/pages/react-aria/home/KanbanExample.tsx
index a5d47463d38..d68b84c1dc7 100644
--- a/packages/dev/docs/pages/react-aria/home/KanbanExample.tsx
+++ b/packages/dev/docs/pages/react-aria/home/KanbanExample.tsx
@@ -203,7 +203,7 @@ function Column({list, status, itemClassName}: ColumnProps) {
         selectionMode="multiple"
         dragAndDropHooks={dragAndDropHooks}
         renderEmptyState={() => 'No tasks.'}
-        className="h-[320px] p-2 md:p-4 overflow-y-auto overflow-x-hidden relative outline outline-0 bg-white/70 dark:bg-zinc-900/60 backdrop-blur border border-black/10 dark:border-white/10 bg-clip-padding text-gray-700 dark:text-zinc-400 flex flex-col gap-3 rounded-xl shadow-xl drop-target:bg-blue-200 dark:drop-target:bg-blue-800/60 drop-target:outline-2 outline-blue-500 forced-colors:outline-[Highlight] -outline-offset-2 empty:items-center empty:justify-center">
+        className="h-[320px] p-2 md:p-4 overflow-y-auto overflow-x-hidden relative outline outline-0 bg-white/70 dark:bg-zinc-900/60 backdrop-blur-sm border border-black/10 dark:border-white/10 bg-clip-padding text-gray-700 dark:text-zinc-400 flex flex-col gap-3 rounded-xl shadow-xl drop-target:bg-blue-200 dark:drop-target:bg-blue-800/60 drop-target:outline-2 outline-blue-500 forced-colors:outline-[Highlight] -outline-offset-2 empty:items-center empty:justify-center">
         {item => <Card item={item} className={itemClassName} />}
       </GridList>
     </section>
@@ -218,15 +218,15 @@ interface CardProps {
 
 function Card({id, item, className}: CardProps) {
   return (
-    <GridListItem id={id} textValue={item.title} className={`group grid grid-cols-[1fr_auto] gap-1 p-2 rounded-lg border border-solid border-black/10 hover:border-black/20 dark:border-white/10 dark:hover:border-white/20 forced-colors:!border-[ButtonBorder] bg-white/80 dark:bg-zinc-900/70 bg-clip-padding hover:shadow-md selected:shadow-md dragging:opacity-50 transition text-slate-700 dark:text-slate-200 cursor-default select-none outline outline-0 outline-offset-2 focus-visible:outline-2 outline-blue-500 forced-colors:outline-[Highlight] forced-colors:!text-[ButtonText] forced-colors:selected:!bg-[Highlight] forced-colors:selected:!text-[HighlightText] forced-color-adjust-none ${className}`}>
+    <GridListItem id={id} textValue={item.title} className={`group grid grid-cols-[1fr_auto] gap-1 p-2 rounded-lg border border-solid border-black/10 hover:border-black/20 dark:border-white/10 dark:hover:border-white/20 forced-colors:border-[ButtonBorder]! bg-white/80 dark:bg-zinc-900/70 bg-clip-padding hover:shadow-md selected:shadow-md dragging:opacity-50 transition text-slate-700 dark:text-slate-200 cursor-default select-none outline outline-0 outline-offset-2 focus-visible:outline-2 outline-blue-500 forced-colors:outline-[Highlight] forced-colors:text-[ButtonText]! forced-colors:selected:bg-[Highlight]! forced-colors:selected:text-[HighlightText]! forced-color-adjust-none ${className}`}>
       <span className="font-bold truncate">{item.title}</span>
       <span className="text-sm justify-self-end">{item.id}</span>
-      <Text slot="description" className="text-sm line-clamp-2 col-span-2 text-slate-500 dark:text-zinc-300 forced-colors:!text-inherit">{item.description}</Text>
+      <Text slot="description" className="text-sm line-clamp-2 col-span-2 text-slate-500 dark:text-zinc-300 forced-colors:text-inherit!">{item.description}</Text>
       <span className="flex items-center gap-1">
         <img src={item.avatar} alt="" className="h-4 w-4 rounded-full" />
         <span className="text-sm">{item.assignee}</span>
       </span>
-      <Button slot="drag" className="bg-transparent border-none text-gray-500 dark:text-zinc-300 text-base leading-none w-fit aspect-square p-0 justify-self-end outline outline-0 focus-visible:outline-2 outline-blue-500 forced-colors:outline-[Highlight] rounded-sm sr-only group-focus-visible:not-sr-only focus:not-sr-only forced-colors:group-selected:text-[HighlightText] forced-colors:group-selected:outline-[HighlightText]">≡</Button>
+      <Button slot="drag" className="bg-transparent border-none text-gray-500 dark:text-zinc-300 text-base leading-none w-fit aspect-square p-0 justify-self-end outline outline-0 focus-visible:outline-2 outline-blue-500 forced-colors:outline-[Highlight] rounded-xs sr-only group-focus-visible:not-sr-only focus:not-sr-only forced-colors:group-selected:text-[HighlightText] forced-colors:group-selected:outline-[HighlightText]">≡</Button>
     </GridListItem>
   );
 }
diff --git a/packages/dev/docs/pages/react-aria/home/Keyboard.tsx b/packages/dev/docs/pages/react-aria/home/Keyboard.tsx
index 39d36b13916..ab71b2d3e9b 100644
--- a/packages/dev/docs/pages/react-aria/home/Keyboard.tsx
+++ b/packages/dev/docs/pages/react-aria/home/Keyboard.tsx
@@ -13,7 +13,7 @@ import React from 'react';
 
 export function Keyboard() {
   return (
-    <svg className="flex-1 stroke-slate-400 dark:stroke-slate-500 forced-colors:!stroke-[ButtonBorder] [--press-fill:theme(colors.slate.300)] dark:[--press-fill:theme(colors.slate.700)] forced-colors:![--press-fill:Highlight]" viewBox="0 0 192 81" fill="none" aria-hidden="true" id="keyboard">
+    <svg className="flex-1 stroke-slate-400 dark:stroke-slate-500 forced-colors:stroke-[ButtonBorder]! [--press-fill:var(--color-slate-300)] dark:[--press-fill:var(--color-slate-700)] forced-colors:[--press-fill:Highlight]!" viewBox="0 0 192 81" fill="none" aria-hidden="true" id="keyboard">
       <g>
         <style>
           {
diff --git a/packages/dev/docs/pages/react-aria/home/Styles.tsx b/packages/dev/docs/pages/react-aria/home/Styles.tsx
index 7baf1717911..c0e21d036e8 100644
--- a/packages/dev/docs/pages/react-aria/home/Styles.tsx
+++ b/packages/dev/docs/pages/react-aria/home/Styles.tsx
@@ -260,13 +260,13 @@ function AnimatedTabs({tabs}: {tabs: TabOptions[]}) {
       <div className="relative overflow-x-auto no-scrollbar dark:isolate p-2 sm:-m-2" ref={tabListScrollRef}>
         <TabList ref={tabListRef} className="flex px-2 y-2 md:px-0" items={tabs}>
           {(tab) =>
-            (<Tab className="flex-shrink-0 cursor-default px-3 py-1.5 text-sm sm:text-base text-black dark:text-white transition outline outline-0 forced-colors:selected:!text-[HighlightText] forced-color-adjust-none">
+            (<Tab className="shrink-0 cursor-default px-3 py-1.5 text-sm sm:text-base text-black dark:text-white transition outline outline-0 forced-colors:selected:text-[HighlightText]! forced-color-adjust-none">
               {({isSelected, isFocusVisible}) => (<>
                 {tab.label}
                 {isFocusVisible && isSelected && (
                   // Focus ring.
                   <motion.span
-                    className="absolute inset-y-2 inset-x-0 z-10 rounded-full outline outline-2 outline-black dark:outline-white forced-colors:!outline-[Highlight] outline-offset-2"
+                    className="absolute inset-y-2 inset-x-0 z-10 rounded-full outline outline-2 outline-black dark:outline-white forced-colors:outline-[Highlight]! outline-offset-2"
                     style={{x, width}} />
                 )}
               </>)}
@@ -285,7 +285,7 @@ function AnimatedTabs({tabs}: {tabs: TabOptions[]}) {
           {(tab) => (
             <TabPanel
               shouldForceMount
-              className="flex-shrink-0 w-full px-4 box-border snap-start snap-always outline outline-0 -outline-offset-2 rounded focus-visible:outline-black">
+              className="shrink-0 w-full px-4 box-border snap-start snap-always outline outline-0 -outline-offset-2 rounded-sm focus-visible:outline-black">
               {tab.content}
             </TabPanel>
           )}
diff --git a/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx b/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
index 412a5818dba..0d10a8c0539 100644
--- a/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
+++ b/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
@@ -56,8 +56,8 @@ export function SwitchAnimation() {
         isSelected={isSelected}
         onChange={isAnimating ? undefined : setSelected}
         className="group inline-flex touch-none">
-        <span className="[--bg:theme(colors.slate.300)] dark:[--bg:theme(colors.zinc.600)] forced-colors:![--bg:ButtonFace] bg-[--bg] [--bg-selected:theme(colors.green.500)] forced-colors:![--bg-selected:Highlight] group-selected:bg-[--bg-selected] group-focus-visible:outline outline-2 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 mr-4 h-10 w-16 rounded-full border border-black/[5%] dark:border-white/10 p-[3px] transition duration-200" style={{animation: isAnimating ? 'switch-background-animation 12s ease-in-out 500ms' : undefined}}>
-          <span className="group-selected:ml-6 group-selected:group-pressed:ml-4 group-pressed:w-10 block h-8 w-8 origin-right rounded-full bg-white forced-colors:bg-[ButtonText] forced-colors:group-selected:bg-[HighlightText] border border-transparent shadow transition-all duration-200" style={{animation: isAnimating ? 'switch-animation 12s ease-in-out 500ms' : undefined, contain: 'layout'}} />
+        <span className="[--bg:var(--color-slate-300)] dark:[--bg:var(--color-zinc-600)] forced-colors:[--bg:ButtonFace]! bg-(--bg) [--bg-selected:var(--color-green-500)] forced-colors:[--bg-selected:Highlight]! group-selected:bg-(--bg-selected) group-focus-visible:outline outline-2 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 mr-4 h-10 w-16 rounded-full border border-black/[5%] dark:border-white/10 p-[3px] transition duration-200" style={{animation: isAnimating ? 'switch-background-animation 12s ease-in-out 500ms' : undefined}}>
+          <span className="group-selected:ml-6 group-selected:group-pressed:ml-4 group-pressed:w-10 block h-8 w-8 origin-right rounded-full bg-white forced-colors:bg-[ButtonText] forced-colors:group-selected:bg-[HighlightText] border border-transparent shadow-sm transition-all duration-200" style={{animation: isAnimating ? 'switch-animation 12s ease-in-out 500ms' : undefined, contain: 'layout'}} />
         </span>
       </Switch>
     </>
diff --git a/packages/dev/docs/pages/react-aria/home/components.tsx b/packages/dev/docs/pages/react-aria/home/components.tsx
index 388ae964aa3..b48fa53b755 100644
--- a/packages/dev/docs/pages/react-aria/home/components.tsx
+++ b/packages/dev/docs/pages/react-aria/home/components.tsx
@@ -37,7 +37,7 @@ export function AddressBar({children}) {
 }
 
 export function GradientText({children}) {
-  return <span className="text-transparent bg-clip-text bg-gradient-to-b from-slate-600 to-slate-900 dark:from-white dark:to-zinc-400">{children}</span>;
+  return <span className="text-transparent bg-clip-text bg-linear-to-b from-slate-600 to-slate-900 dark:from-white dark:to-zinc-400">{children}</span>;
 }
 
 export function Card({className, ...otherProps}) {
@@ -71,13 +71,13 @@ export function Arrow({href, children, textX, x1, x2, points, y, marker = 'marke
         ? <polyline points={points} {...markerProps} className="stroke-slate-800 dark:stroke-white fill-none" />
         : <line x1={x1} y1={y} x2={x2} y2={y} {...markerProps} className="stroke-slate-800 dark:stroke-white" />
       }
-      <a href={href} target="_blank" className="pointer-events-auto outline-none rounded-sm focus:outline-blue-600 dark:focus:outline-blue-500 outline-offset-2"><text x={textX} y={y + 3} className="text-xs fill-slate-900 dark:fill-white underline">{children}</text></a>
+      <a href={href} target="_blank" className="pointer-events-auto outline-hidden rounded-xs focus:outline-blue-600 dark:focus:outline-blue-500 outline-offset-2"><text x={textX} y={y + 3} className="text-xs fill-slate-900 dark:fill-white underline">{children}</text></a>
     </>
   );
 }
 
 export const Finger = React.forwardRef((props: HTMLAttributes<HTMLDivElement>, ref: ForwardedRef<HTMLDivElement | null>) => {
-  return <div ref={ref} className="z-10 pointer-events-none absolute w-10 h-10 rounded-full border border-black/80 bg-black/80 dark:border-white/80 dark:bg-white/80 dark:mix-blend-difference opacity-0 [--hover-opacity:0.15] [--pressed-opacity:0.3] forced-colors:[--hover-opacity:0.5] forced-colors:[--pressed-opacity:1] forced-colors:!bg-[Highlight] forced-colors:!mix-blend-normal" {...props} />;
+  return <div ref={ref} className="z-10 pointer-events-none absolute w-10 h-10 rounded-full border border-black/80 bg-black/80 dark:border-white/80 dark:bg-white/80 dark:mix-blend-difference opacity-0 [--hover-opacity:0.15] [--pressed-opacity:0.3] forced-colors:[--hover-opacity:0.5] forced-colors:[--pressed-opacity:1] forced-colors:bg-[Highlight]! forced-colors:mix-blend-normal!" {...props} />;
 });
 
 export function LearnMoreLink({href, className}) {
diff --git a/packages/dev/docs/pages/react-aria/index.mdx b/packages/dev/docs/pages/react-aria/index.mdx
index 03a92504602..fb8f341ae2e 100644
--- a/packages/dev/docs/pages/react-aria/index.mdx
+++ b/packages/dev/docs/pages/react-aria/index.mdx
@@ -62,7 +62,7 @@ image: ../assets/ReactAriaOpenGraph.webp
     <p className="text-slate-800 dark:text-slate-300 text-center text-lg md:text-2xl max-w-3xl mx-auto [text-wrap:balance]">Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.</p>
 
     <div className="flex flex-col md:flex-row items-center gap-4 my-10 justify-center">
-      <a href="getting-started.html" className="bg-gradient-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring  dark:outline-white outline-offset-2 active:scale-95">Get Started</a>
+      <a href="getting-started.html" className="bg-linear-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring  dark:outline-white outline-offset-2 active:scale-95">Get Started</a>
       <a href="components.html" className="bg-white/50 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring  dark:outline-white outline-offset-2 active:scale-95">Explore Components</a>
     </div>
 
@@ -111,7 +111,7 @@ ReactDOM.createRoot(document.getElementById('example-app')).render(<ExampleApp /
 <main className="max-w-6xl mx-auto">
 
 <Section className="pink-gradient-background">
-  <h2><GradientText>Bring your own</GradientText> <span className="bg-clip-text bg-gradient-to-t from-fuchsia-600 to-pink-600">styles</span><GradientText>.</GradientText></h2>
+  <h2><GradientText>Bring your own</GradientText> <span className="bg-clip-text bg-linear-to-t from-fuchsia-600 to-pink-600">styles</span><GradientText>.</GradientText></h2>
   <p>React Aria is style-free out of the box, allowing you to build custom designs to fit your application or design system using any styling and animation solution. Each component is broken down into individual parts with built-in states, render props, and slots that make styling a breeze.</p>
   <LearnMoreLink href="styling.html" className="text-fuchsia-600 dark:text-fuchsia-500 hover:bg-fuchsia-400/[15%]" />
 
@@ -183,7 +183,7 @@ ReactDOM.createRoot(document.getElementById('example-app')).render(<ExampleApp /
     </Button>
   </Group>
   {/* Built-in entry and exit animation states. */}
-  <Popover className="w-[--trigger-width] ... entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
+  <Popover className="w-(--trigger-width) ... entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
     <ListBox items={people}>
       {item => (
         <ListBoxItem textValue={item.name} className="group text-gray-900 ... focus:bg-blue-600 focus:text-white">
@@ -280,7 +280,7 @@ import {Styles} from './home/Styles';
 </Section>
 
 <Section className="red-gradient-background">
-  <h2><span className="bg-clip-text bg-gradient-to-b from-pink-600 to-rose-600">Advanced features</span> <GradientText>for ambitious apps.</GradientText></h2>
+  <h2><span className="bg-clip-text bg-linear-to-b from-pink-600 to-rose-600">Advanced features</span> <GradientText>for ambitious apps.</GradientText></h2>
   <p>Make your web app feel native with rich interactions that adapt to the device, platform, and user. React Aria supports advanced features like accessible drag and drop, keyboard multi-selection, built-in form validation, table column resizing, and a ton more.</p>
   <LearnMoreLink href="dnd.html" className="text-rose-700 dark:text-rose-500 hover:bg-rose-400/[15%]" />
 
@@ -293,7 +293,7 @@ import {KanbanBoard} from './home/KanbanExample';
 </Section>
 
 <Section className="cyan-gradient-background">
-  <h2><GradientText>High quality</GradientText> <span className="bg-clip-text bg-gradient-to-t from-cyan-600 to-green-600">interactions</span> <GradientText>on all devices.</GradientText></h2>
+  <h2><GradientText>High quality</GradientText> <span className="bg-clip-text bg-linear-to-t from-cyan-600 to-green-600">interactions</span> <GradientText>on all devices.</GradientText></h2>
   <p>React Aria ensures a great experience for users, no matter their device. All components are optimized for mouse, touch, keyboard, and screen reader interactions, with a meticulous attention to detail that makes your app feel responsive and natural on every platform.</p>
   <LearnMoreLink href="interactions.html" className="text-cyan-700 dark:text-cyan-600 hover:bg-cyan-400/[15%]" />
 
@@ -378,13 +378,13 @@ import {Pagination} from './home/Pagination';
 </Section>
 
 <Section className="blue-gradient-background">
-  <h2><span className="bg-clip-text bg-gradient-to-b from-sky-500 to-indigo-600">Accessibility</span> <GradientText>that's truly first-class.</GradientText></h2>
+  <h2><span className="bg-clip-text bg-linear-to-b from-sky-500 to-indigo-600">Accessibility</span> <GradientText>that's truly first-class.</GradientText></h2>
   <p>React Aria is designed with accessibility as a top priority, and battle tested in production applications. All components are built to work across a wide variety of devices and assistive technologies to ensure the best experience possible for all users.</p>
   <LearnMoreLink href="accessibility.html" className="text-blue-600 dark:text-blue-500 hover:bg-blue-400/[15%]" />
 
   <div className="grid gap-y-6 gap-x-20 md:grid-cols-[min-content_auto] md:grid-flow-col place-items-center">
-    <div className="w-full max-w-xs md:w-auto md:max-w-none md:row-span-3 md:h-full aspect-[1/2] iphone-frame md:order-4">
-      <div className="w-full h-full bg-white dark:bg-zinc-900 p-[8%] pb-[11%] iphone-mask [&>*]:h-full">
+    <div className="w-full max-w-xs md:w-auto md:max-w-none md:row-span-3 md:h-full aspect-1/2 iphone-frame md:order-4">
+      <div className="w-full h-full bg-white dark:bg-zinc-900 p-[8%] pb-[11%] iphone-mask *:h-full">
 
 ```tsx snippet
 import {A11y} from './home/A11y';
@@ -413,7 +413,7 @@ import {A11y} from './home/A11y';
 </Section>
 
 <Section className="orange-gradient-background">
-  <h2><GradientText>Ready for an</GradientText> <span className="bg-clip-text bg-gradient-to-b from-yellow-500 to-orange-600">international</span> <GradientText>audience.</GradientText></h2>
+  <h2><GradientText>Ready for an</GradientText> <span className="bg-clip-text bg-linear-to-b from-yellow-500 to-orange-600">international</span> <GradientText>audience.</GradientText></h2>
   <p>React Aria is engineered for internationalization out of the box, including translations in over 30 languages, localized date and number formatting and parsing, support for 13 calendar systems, 5 numbering systems, right-to-left layout, and more.</p>
   <LearnMoreLink href="internationalization.html" className="text-orange-700 dark:text-orange-600 hover:bg-orange-400/[15%]" />
 
@@ -426,7 +426,7 @@ import {I18n} from './home/I18n';
 </Section>
 
 <Section className="green-gradient-background">
-  <h2><span className="bg-clip-text bg-gradient-to-b from-lime-600 to-green-600">Customizable</span> <GradientText>to the max.</GradientText></h2>
+  <h2><span className="bg-clip-text bg-linear-to-b from-lime-600 to-green-600">Customizable</span> <GradientText>to the max.</GradientText></h2>
   <p>React Aria offers a flexible and scalable API that lets you dive as deep into the details as you like. Start with high-level components with a built-in DOM structure and simple styling API, compose custom patterns with contexts, and for the ultimate control, drop down to the low-level Hook-based API. Mix and match as needed.</p>
   <LearnMoreLink href="advanced.html" className="text-green-700 dark:text-green-600 hover:bg-green-400/[15%]" />
 
@@ -437,7 +437,7 @@ import {I18n} from './home/I18n';
 
     <Scrollable className="relative flex-1 -mx-6 -mb-6 mt-6 [&_.source]:px-6 [&_.source]:text-[15px] [&_.source]:leading-snug lg:[&_.source]:text-sm isolate rounded-b-2xl">
 
-<div className="highlight-tags [--delay:2.5s] h-full [&>*]:h-full cross-fade [--fade-from:1] [--fade-to:0]">
+<div className="highlight-tags [--delay:2.5s] h-full *:h-full cross-fade [--fade-from:1] [--fade-to:0]">
 
 ```tsx
 <Select>
@@ -484,7 +484,7 @@ import {I18n} from './home/I18n';
     <CardTitle>Build custom patterns.</CardTitle>
     <CardDescription>Use the exported contexts for each component to build your own custom patterns with compositional APIs just like React Aria's built-in components.</CardDescription>
 
-    <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 [&>*]:h-full [&_.source]:pl-6 lg:[&_.source]:text-[13px] rounded-b-2xl">
+    <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 *:h-full [&_.source]:pl-6 lg:[&_.source]:text-[13px] rounded-b-2xl">
 
 ```tsx format=false
 // A Stepper component with customizable buttons.
@@ -519,7 +519,7 @@ function Stepper({children}) {
     <CardTitle>Customize component parts.</CardTitle>
     <CardDescription>React Aria's contexts let you extend components with new features, or even replace individual parts with totally custom implementations.</CardDescription>
 
-    <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 max-h-[30rem] lg:max-h-none [--code-padding:theme(spacing.6)] [&_.source]:px-6 lg:[&_.source]:text-[13px] code-mask rounded-b-2xl">
+    <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 max-h-[30rem] lg:max-h-none [--code-padding:--spacing(6)] [&_.source]:px-6 lg:[&_.source]:text-[13px] code-mask rounded-b-2xl">
 
 ```tsx format=false
 // Add a clear button to a DatePicker.
@@ -573,7 +573,7 @@ function DatePickerClearButton() {
     <CardTitle>Get complete control with hooks.</CardTitle>
     <CardDescription>Drop down to the low-level Hook-based API to intercept events, override behavior, customize DOM elements, and much more. Mix and match components and hooks as needed.</CardDescription>
 
-    <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 [&>*]:h-full [--code-padding:theme(spacing.6)] [&_.source]:px-6 lg:[&_.source]:text-[13px] rounded-b-2xl">
+    <Scrollable className="flex-1 -mx-6 -mb-6 mt-6 *:h-full [--code-padding:--spacing(6)] [&_.source]:px-6 lg:[&_.source]:text-[13px] rounded-b-2xl">
 
 ```tsx format=false
 import {useCalendarGrid} from 'react-aria';
diff --git a/packages/react-aria-components/docs/examples/.postcssrc b/packages/react-aria-components/docs/examples/.postcssrc
index 0985cb2aab0..e092dc7c1ef 100644
--- a/packages/react-aria-components/docs/examples/.postcssrc
+++ b/packages/react-aria-components/docs/examples/.postcssrc
@@ -1,5 +1,5 @@
 {
   "plugins": {
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
 }
diff --git a/packages/react-aria-components/docs/examples/account-menu.mdx b/packages/react-aria-components/docs/examples/account-menu.mdx
index 86d990698ce..d3b61d44d3d 100644
--- a/packages/react-aria-components/docs/examples/account-menu.mdx
+++ b/packages/react-aria-components/docs/examples/account-menu.mdx
@@ -45,11 +45,11 @@ function AccountMenuExample() {
   return (
     <div className="p-8 bg-gray-50 dark:bg-zinc-900 rounded-lg flex items-start justify-center">
       <DialogTrigger>
-        <Button aria-label="Account" className="inline-flex items-center justify-center rounded-md p-1.5 text-white bg-transparent border-none hover:bg-gray-200 pressed:bg-gray-300 dark:hover:bg-zinc-800 dark:pressed:bg-zinc-700 transition-colors cursor-default outline-none focus-visible:ring-2 focus-visible:ring-blue-600">
+        <Button aria-label="Account" className="inline-flex items-center justify-center rounded-md p-1.5 text-white bg-transparent border-none hover:bg-gray-200 pressed:bg-gray-300 dark:hover:bg-zinc-800 dark:pressed:bg-zinc-700 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600">
           <img alt="" src="https://i.imgur.com/xIe7Wlb.png" className="w-7 h-7 rounded-full" />
         </Button>
         <Popover placement="bottom end" className="p-2 overflow-auto rounded-lg bg-white dark:bg-zinc-950 shadow-lg ring-1 ring-black dark:ring-white ring-opacity-10 dark:ring-opacity-15 entering:animate-in entering:fade-in entering:placement-bottom:slide-in-from-top-1 entering:placement-top:slide-in-from-bottom-1 exiting:animate-out exiting:fade-out exiting:placement-bottom:slide-out-to-top-1 exiting:placement-top:slide-out-to-bottom-1 fill-mode-forwards origin-top-left">
-          <Dialog className="outline-none">
+          <Dialog className="outline-hidden">
             <div className="flex gap-2 items-center mx-3 mt-2">
               <img alt="" src="https://i.imgur.com/xIe7Wlb.png" className="w-16 h-16 rounded-full" />
               <div className="flex flex-col gap-1">
@@ -59,7 +59,7 @@ function AccountMenuExample() {
               </div>
             </div>
             <Separator className="border-none bg-gray-300 dark:bg-zinc-600 h-[1px] mx-3 mt-4 mb-2" />
-            <Menu className="outline-none">
+            <Menu className="outline-hidden">
               <MyMenuItem id="new">Account Settings</MyMenuItem>
               <MyMenuItem id="open">Support</MyMenuItem>
               <Separator className="bg-gray-300 dark:bg-zinc-600 h-[1px] mx-3 my-2" />
@@ -76,15 +76,15 @@ function AccountMenuExample() {
 }
 
 function MyMenuItem(props: MenuItemProps) {
-  return <MenuItem {...props} className="group flex w-full items-center rounded-md px-3 py-2 box-border outline-none cursor-default text-gray-900 dark:text-gray-100 focus:bg-blue-500 focus:text-white" />;
+  return <MenuItem {...props} className="group flex w-full items-center rounded-md px-3 py-2 box-border outline-hidden cursor-default text-gray-900 dark:text-gray-100 focus:bg-blue-500 focus:text-white" />;
 }
 
 function MySwitch(props: SwitchProps) {
   return (
     <Switch className="group flex gap-2 items-center text-gray-800 dark:text-zinc-200 text-base transition">
       {composeRenderProps(props.children, children => <>
-        <div className="flex h-3 w-6 p-[2px] items-center shrink-0 cursor-default rounded-full transition duration-200 ease-in-out shadow-inner border border-transparent bg-gray-400 dark:bg-zinc-400 group-pressed:bg-gray-500 dark:group-pressed:bg-zinc-300 group-selected:bg-gray-700 group-selected:dark:bg-zinc-300 group-selected:forced-colors:!bg-[Highlight] group-selected:group-pressed:bg-gray-800 group-selected:dark:group-pressed:bg-zinc-200 outline outline-0 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 group-focus-visible:outline-2">
-          <div className="h-3 w-3 transform rounded-full bg-white dark:bg-zinc-900 outline outline-1 -outline-offset-1 outline-transparent shadow transition duration-200 ease-in-out translate-x-0 group-selected:translate-x-[100%]" />
+        <div className="flex h-3 w-6 p-[2px] items-center shrink-0 cursor-default rounded-full transition duration-200 ease-in-out shadow-inner border border-transparent bg-gray-400 dark:bg-zinc-400 group-pressed:bg-gray-500 dark:group-pressed:bg-zinc-300 group-selected:bg-gray-700 group-selected:dark:bg-zinc-300 group-selected:forced-colors:bg-[Highlight]! group-selected:group-pressed:bg-gray-800 group-selected:dark:group-pressed:bg-zinc-200 outline outline-0 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 group-focus-visible:outline-2">
+          <div className="h-3 w-3 transform rounded-full bg-white dark:bg-zinc-900 outline outline-1 -outline-offset-1 outline-transparent shadow-sm transition duration-200 ease-in-out translate-x-0 group-selected:translate-x-[100%]" />
         </div>
         {children}
       </>)}
diff --git a/packages/react-aria-components/docs/examples/action-menu.mdx b/packages/react-aria-components/docs/examples/action-menu.mdx
index 6f24412393e..f24a1eb3372 100644
--- a/packages/react-aria-components/docs/examples/action-menu.mdx
+++ b/packages/react-aria-components/docs/examples/action-menu.mdx
@@ -42,11 +42,11 @@ import RailIcon from '@spectrum-icons/workflow/Rail';
 
 function MenuExample() {
   return (
-    <div className="bg-gradient-to-r to-blue-500 from-violet-500 p-8 h-[250px] rounded-lg">
+    <div className="bg-linear-to-r to-blue-500 from-violet-500 p-8 h-[250px] rounded-lg">
       <MenuTrigger>
-        <Button aria-label="Menu" className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-none focus-visible:ring-2 focus-visible:ring-white/75"><RailIcon size="S" /></Button>
+        <Button aria-label="Menu" className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"><RailIcon size="S" /></Button>
         <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards origin-top-left">
-          <Menu className="outline-none">
+          <Menu className="outline-hidden">
             <ActionItem id="new">New…</ActionItem>
             <ActionItem id="open">Open…</ActionItem>
             <Separator className="bg-gray-300 h-[1px] mx-3 my-1" />
@@ -62,7 +62,7 @@ function MenuExample() {
 }
 
 function ActionItem(props: MenuItemProps) {
-  return <MenuItem {...props} className="group flex w-full items-center rounded-md px-3 py-2 box-border outline-none cursor-default text-gray-900 focus:bg-violet-500 focus:text-white" />;
+  return <MenuItem {...props} className="group flex w-full items-center rounded-md px-3 py-2 box-border outline-hidden cursor-default text-gray-900 focus:bg-violet-500 focus:text-white" />;
 }
 ```
 
diff --git a/packages/react-aria-components/docs/examples/category-tabs.mdx b/packages/react-aria-components/docs/examples/category-tabs.mdx
index a3f2312cd5b..e8bc3207af1 100644
--- a/packages/react-aria-components/docs/examples/category-tabs.mdx
+++ b/packages/react-aria-components/docs/examples/category-tabs.mdx
@@ -46,7 +46,7 @@ import type {TabProps, TabPanelProps} from 'react-aria-components';
 
 function TabsExample() {
   return (
-    <div className="bg-gradient-to-r from-lime-600 to-emerald-600 py-8 px-2 sm:px-8 rounded-lg flex justify-center">
+    <div className="bg-linear-to-r from-lime-600 to-emerald-600 py-8 px-2 sm:px-8 rounded-lg flex justify-center">
       <Tabs className="w-full max-w-[300px]">
         <TabList aria-label="Feeds" className="flex space-x-1 rounded-full bg-green-900/40 bg-clip-padding p-1 border border-solid border-white/30">
           <MyTab id="blog">Blog</MyTab>
@@ -84,19 +84,19 @@ function MyTab(props: TabProps) {
     <Tab
       {...props}
       className={({isSelected}) => `
-        w-full rounded-full py-2.5 font-medium text-[1.1em] text-center cursor-default ring-black outline-none transition-colors focus-visible:ring-2
-        ${isSelected ? 'text-emerald-700 bg-white shadow' : 'text-white hover:bg-white/10 pressed:bg-white/10'}
+        w-full rounded-full py-2.5 font-medium text-[1.1em] text-center cursor-default ring-black outline-hidden transition-colors focus-visible:ring-2
+        ${isSelected ? 'text-emerald-700 bg-white shadow-sm' : 'text-white hover:bg-white/10 pressed:bg-white/10'}
       `} />
   );
 }
 
 function MyTabPanel(props: TabPanelProps) {
-  return <TabPanel {...props} className="mt-2 text-gray-700 font-serif rounded-2xl bg-white p-2 shadow ring-black outline-none focus-visible:ring-2" />;
+  return <TabPanel {...props} className="mt-2 text-gray-700 font-serif rounded-2xl bg-white p-2 shadow-sm ring-black outline-hidden focus-visible:ring-2" />;
 }
 
 function Article({title, summary}: {title: string, summary: string}) {
   return (
-    <Link href="#" className="p-2 rounded-lg hover:bg-gray-100 pressed:bg-gray-100 text-[inherit] no-underline outline-none focus-visible:ring-2 ring-emerald-500">
+    <Link href="#" className="p-2 rounded-lg hover:bg-gray-100 pressed:bg-gray-100 text-[inherit] no-underline outline-hidden focus-visible:ring-2 ring-emerald-500">
       <h3 className="text-base mt-0 mb-0.5 font-semibold overflow-hidden text-ellipsis whitespace-nowrap">{title}</h3>
       <p className="text-sm m-0 overflow-hidden text-ellipsis line-clamp-2">{summary}</p>
     </Link>
diff --git a/packages/react-aria-components/docs/examples/contact-list.mdx b/packages/react-aria-components/docs/examples/contact-list.mdx
index 00ad263a41b..a63a0817312 100644
--- a/packages/react-aria-components/docs/examples/contact-list.mdx
+++ b/packages/react-aria-components/docs/examples/contact-list.mdx
@@ -111,8 +111,8 @@ import {ListBox, ListBoxItem, ListBoxSection, Header, Collection, Text} from 're
 
 function ContactListExample() {
   return (
-    <div className="bg-gradient-to-r from-blue-500 to-sky-500 p-8 rounded-lg flex justify-center">
-      <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-none bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow scroll-pb-2 scroll-pt-7">
+    <div className="bg-linear-to-r from-blue-500 to-sky-500 p-8 rounded-lg flex justify-center">
+      <ListBox aria-label="Contacts" selectionMode="multiple" selectionBehavior="replace" className="w-72 max-h-[290px] overflow-auto outline-hidden bg-white text-gray-700 p-2 flex flex-col gap-2 rounded-lg shadow-sm scroll-pb-2 scroll-pt-7">
         <ContactSection title="Favorites" items={favorites}>
           {item => <Contact item={item} />}
         </ContactSection>
@@ -137,7 +137,7 @@ function ContactSection({title, children, items}) {
 
 function Contact({item}) {
   return (
-    <ListBoxItem id={item.id} textValue={item.name} className="group relative py-1 px-2 outline-none cursor-default grid grid-rows-2 grid-flow-col auto-cols-max gap-x-3 rounded selected:bg-blue-500 text-slate-700 selected:text-white selected:[&:has(+[data-selected])]:rounded-b-none [&[data-selected]+[data-selected]]:rounded-t-none focus-visible:ring-2 ring-offset-2 ring-blue-500">
+    <ListBoxItem id={item.id} textValue={item.name} className="group relative py-1 px-2 outline-hidden cursor-default grid grid-rows-2 grid-flow-col auto-cols-max gap-x-3 rounded-sm selected:bg-blue-500 text-slate-700 selected:text-white [&:has(+[data-selected])]:selected:rounded-b-none [&[data-selected]+[data-selected]]:rounded-t-none focus-visible:ring-2 ring-offset-2 ring-blue-500">
       <img src={item.avatar} alt="" className="row-span-2 place-self-center h-8 w-8 rounded-full" />
       <Text slot="label" className="font-semibold truncate">{item.name}</Text>
       <Text slot="description" className="truncate text-sm text-slate-600 group-selected:text-white">{item.username}</Text>
diff --git a/packages/react-aria-components/docs/examples/datepicker.mdx b/packages/react-aria-components/docs/examples/datepicker.mdx
index cb4239616e9..6cc4a7c3461 100644
--- a/packages/react-aria-components/docs/examples/datepicker.mdx
+++ b/packages/react-aria-components/docs/examples/datepicker.mdx
@@ -48,14 +48,14 @@ import ChevronRightIcon from '@spectrum-icons/workflow/ChevronRight';
 
 function DatePickerExample() {
   return (
-    <div className="bg-gradient-to-r from-violet-500 to-fuchsia-600 p-12 sm:h-[400px] rounded-lg flex items-start justify-center">
+    <div className="bg-linear-to-r from-violet-500 to-fuchsia-600 p-12 sm:h-[400px] rounded-lg flex items-start justify-center">
       <DatePicker className="group flex flex-col gap-1 w-[200px]">
         <Label className="text-white cursor-default">Date</Label>
         <Group className="flex rounded-lg bg-white/90 focus-within:bg-white group-open:bg-white transition pl-3 shadow-md text-gray-700 focus-visible:ring-2 ring-black">
           <DateInput className="flex flex-1 py-2">
-            {(segment) => <DateSegment segment={segment} className="px-0.5 tabular-nums outline-none rounded-sm focus:bg-violet-700 focus:text-white caret-transparent placeholder-shown:italic" />}
+            {(segment) => <DateSegment segment={segment} className="px-0.5 tabular-nums outline-hidden rounded-xs focus:bg-violet-700 focus:text-white caret-transparent placeholder-shown:italic" />}
           </DateInput>
-          <Button className="outline-none px-3 flex items-center text-gray-700 transition border-0 border-solid border-l border-l-purple-200 bg-transparent rounded-r-lg pressed:bg-purple-100 focus-visible:ring-2 ring-black">
+          <Button className="outline-hidden px-3 flex items-center text-gray-700 transition border-0 border-solid border-l border-l-purple-200 bg-transparent rounded-r-lg pressed:bg-purple-100 focus-visible:ring-2 ring-black">
             <ChevronUpDownIcon size="XS" />
           </Button>
         </Group>
@@ -72,7 +72,7 @@ function DatePickerExample() {
                   {day => <CalendarHeaderCell className="text-xs text-gray-500 font-semibold">{day}</CalendarHeaderCell>}
                 </CalendarGridHeader>
                 <CalendarGridBody>
-                  {date => <CalendarCell date={date} className="w-9 h-9 outline-none cursor-default rounded-full flex items-center justify-center outside-month:text-gray-300 hover:bg-gray-100 pressed:bg-gray-200 selected:bg-violet-700 selected:text-white focus-visible:ring ring-violet-600/70 ring-offset-2" />}
+                  {date => <CalendarCell date={date} className="w-9 h-9 outline-hidden cursor-default rounded-full flex items-center justify-center outside-month:text-gray-300 hover:bg-gray-100 pressed:bg-gray-200 selected:bg-violet-700 selected:text-white focus-visible:ring-3 ring-violet-600/70 ring-offset-2" />}
                 </CalendarGridBody>
               </CalendarGrid>
             </Calendar>
@@ -84,7 +84,7 @@ function DatePickerExample() {
 }
 
 function RoundButton(props: ButtonProps) {
-  return <Button {...props} className="w-9 h-9 outline-none cursor-default bg-transparent text-gray-600 border-0 rounded-full flex items-center justify-center hover:bg-gray-100 pressed:bg-gray-200 focus-visible:ring ring-violet-600/70 ring-offset-2" />;
+  return <Button {...props} className="w-9 h-9 outline-hidden cursor-default bg-transparent text-gray-600 border-0 rounded-full flex items-center justify-center hover:bg-gray-100 pressed:bg-gray-200 focus-visible:ring-3 ring-violet-600/70 ring-offset-2" />;
 }
 
 function MyPopover(props: PopoverProps) {
diff --git a/packages/react-aria-components/docs/examples/destructive-dialog.mdx b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
index eda36167fa9..96c89043384 100644
--- a/packages/react-aria-components/docs/examples/destructive-dialog.mdx
+++ b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
@@ -41,9 +41,9 @@ import AlertIcon from '@spectrum-icons/workflow/Alert';
 
 function ModalExample() {
   return (
-    <div className="bg-gradient-to-r from-sky-400 to-indigo-500 p-12 rounded-lg flex justify-center">
+    <div className="bg-linear-to-r from-sky-400 to-indigo-500 p-12 rounded-lg flex justify-center">
       <DialogTrigger>
-        <Button className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-none focus-visible:ring-2 focus-visible:ring-white/75">Delete…</Button>
+        <Button className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75">Delete…</Button>
         <ModalOverlay className={({isEntering, isExiting}) => `
           fixed inset-0 z-10 overflow-y-auto bg-black/25 flex min-h-full items-center justify-center p-4 text-center backdrop-blur
           ${isEntering ? 'animate-in fade-in duration-300 ease-out' : ''}
@@ -54,7 +54,7 @@ function ModalExample() {
             ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''}
             ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''}
           `}>
-            <Dialog role="alertdialog" className="outline-none relative">
+            <Dialog role="alertdialog" className="outline-hidden relative">
               {({ close }) => (<>
                 <Heading slot="title" className="text-xxl font-semibold leading-6 my-0 text-slate-700">Delete folder</Heading>
                 <div className="w-6 h-6 text-red-500 absolute right-0 top-0 stroke-2"><AlertIcon size="M" /></div>
@@ -83,7 +83,7 @@ function ModalExample() {
 }
 
 function DialogButton({className, ...props}) {
-  return <Button {...props} className={`inline-flex justify-center rounded-md border border-solid border-transparent px-5 py-2 font-semibold font-[inherit] text-base transition-colors cursor-default outline-none focus-visible:ring-2 ring-blue-500 ring-offset-2 ${className}`} />;
+  return <Button {...props} className={`inline-flex justify-center rounded-md border border-solid border-transparent px-5 py-2 font-semibold font-[inherit] text-base transition-colors cursor-default outline-hidden focus-visible:ring-2 ring-blue-500 ring-offset-2 ${className}`} />;
 }
 ```
 
diff --git a/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx b/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx
index 3869ff2dcec..b15301951fc 100644
--- a/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx
+++ b/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx
@@ -111,7 +111,7 @@ function Sheet() {
   return (
     <>
       <Button
-        className="text-blue-600 text-lg font-semibold outline-none rounded bg-transparent border-none pressed:text-blue-700 focus-visible:ring"
+        className="text-blue-600 text-lg font-semibold outline-hidden rounded-sm bg-transparent border-none pressed:text-blue-700 focus-visible:ring-3"
         onPress={() => setOpen(true)}>
         Open sheet
       </Button>
@@ -124,7 +124,7 @@ function Sheet() {
             className="fixed inset-0 z-10"
             style={{ backgroundColor: bg as any }}>
             <MotionModal
-              className="bg-[--page-background] absolute bottom-0 w-full rounded-t-xl shadow-lg will-change-transform"
+              className="bg-(--page-background) absolute bottom-0 w-full rounded-t-xl shadow-lg will-change-transform"
               initial={{ y: h }}
               animate={{ y: 0 }}
               exit={{ y: h }}
@@ -146,10 +146,10 @@ function Sheet() {
               }}>
               {/* drag affordance */}
               <div className="mx-auto w-12 mt-2 h-1.5 rounded-full bg-gray-400" />
-              <Dialog className="px-4 pb-4 outline-none">
+              <Dialog className="px-4 pb-4 outline-hidden">
                 <div className="flex justify-end">
                   <Button
-                    className="text-blue-600 text-lg font-semibold mb-8 outline-none rounded bg-transparent border-none pressed:text-blue-700 focus-visible:ring"
+                    className="text-blue-600 text-lg font-semibold mb-8 outline-hidden rounded-sm bg-transparent border-none pressed:text-blue-700 focus-visible:ring-3"
                     onPress={() => setOpen(false)}>
                     Done
                   </Button>
diff --git a/packages/react-aria-components/docs/examples/image-grid.mdx b/packages/react-aria-components/docs/examples/image-grid.mdx
index 85331108276..2126b99d14c 100644
--- a/packages/react-aria-components/docs/examples/image-grid.mdx
+++ b/packages/react-aria-components/docs/examples/image-grid.mdx
@@ -65,13 +65,13 @@ function ImageGridExample() {
   };
 
   return (
-    <div className="bg-gradient-to-r from-sky-500 to-teal-500 p-2 sm:p-8 rounded-lg flex justify-center">
-      <ListBox aria-label="Images" items={list.items} selectionMode="multiple" layout="grid" renderEmptyState={renderEmptyState} className="overflow-auto outline-none bg-white rounded-lg shadow p-2 h-[350px] w-full max-w-[372px] grid grid-cols-3 gap-3 empty:flex">
+    <div className="bg-linear-to-r from-sky-500 to-teal-500 p-2 sm:p-8 rounded-lg flex justify-center">
+      <ListBox aria-label="Images" items={list.items} selectionMode="multiple" layout="grid" renderEmptyState={renderEmptyState} className="overflow-auto outline-hidden bg-white rounded-lg shadow-sm p-2 h-[350px] w-full max-w-[372px] grid grid-cols-3 gap-3 empty:flex">
         {item => (
-          <ListBoxItem textValue={item.user.name} className="relative rounded outline-none group cursor-default">
-            <img src={item.urls.regular} alt={item.alt_description} className="h-[80px] w-full object-cover rounded group-selected:ring-2 group-focus-visible:ring-4 group-selected:group-focus-visible:ring-4 ring-offset-2 ring-sky-600" />
+          <ListBoxItem textValue={item.user.name} className="relative rounded-sm outline-hidden group cursor-default">
+            <img src={item.urls.regular} alt={item.alt_description} className="h-[80px] w-full object-cover rounded-sm group-selected:ring-2 group-focus-visible:ring-4 group-selected:group-focus-visible:ring-4 ring-offset-2 ring-sky-600" />
             <Text slot="label" className="text-[11px] text-gray-700 font-semibold overflow-hidden text-ellipsis whitespace-nowrap max-w-full block mt-1">{item.user.name}</Text>
-            <div className="absolute top-2 left-2 text-sky-800 rounded-full leading-[0] bg-white border border-white border-solid hidden group-selected:block">
+            <div className="absolute top-2 left-2 text-sky-800 rounded-full leading-0 bg-white border border-white border-solid hidden group-selected:block">
               <CheckCircleIcon size="S" />
             </div>
           </ListBoxItem>
diff --git a/packages/react-aria-components/docs/examples/ios-list.mdx b/packages/react-aria-components/docs/examples/ios-list.mdx
index 3b5eeb1e9d3..047e48369e3 100644
--- a/packages/react-aria-components/docs/examples/ios-list.mdx
+++ b/packages/react-aria-components/docs/examples/ios-list.mdx
@@ -154,7 +154,7 @@ function SwipableList() {
       {/* Toolbar */}
       <div className="flex pb-4 justify-between">
         <Button
-          className="text-blue-600 text-lg outline-none bg-transparent border-none transition pressed:text-blue-700 focus-visible:ring disabled:text-gray-400"
+          className="text-blue-600 text-lg outline-hidden bg-transparent border-none transition pressed:text-blue-700 focus-visible:ring-3 disabled:text-gray-400"
           style={{ opacity: selectionMode === "none" ? 0 : 1 }}
           isDisabled={selectedKeys !== 'all' && selectedKeys.size === 0}
           onPress={onDelete}
@@ -162,7 +162,7 @@ function SwipableList() {
           Delete
         </Button>
         <Button
-          className="text-blue-600 text-lg outline-none bg-transparent border-none transition pressed:text-blue-700 focus-visible:ring"
+          className="text-blue-600 text-lg outline-hidden bg-transparent border-none transition pressed:text-blue-700 focus-visible:ring-3"
           onPress={() => {
             setSelectionMode((m) => (m === "none" ? "multiple" : "none"));
             setSelectedKeys(new Set());
@@ -221,7 +221,7 @@ function ListItem({ id, children, textValue, onRemove }) {
     <MotionItem
       id={id}
       textValue={textValue}
-      className="outline-none group relative overflow-clip border-t border-0 border-solid last:border-b border-gray-200 dark:border-gray-800 pressed:bg-gray-200 dark:pressed:bg-gray-800 selected:bg-gray-200 dark:selected:bg-gray-800 focus-visible:outline focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
+      className="outline-hidden group relative overflow-clip border-t border-0 border-solid last:border-b border-gray-200 dark:border-gray-800 pressed:bg-gray-200 dark:pressed:bg-gray-800 selected:bg-gray-200 dark:selected:bg-gray-800 focus-visible:outline focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
       layout
       transition={{ duration: 0.25 }}
       exit={{ opacity: 0 }}
@@ -265,7 +265,7 @@ function ListItem({ id, children, textValue, onRemove }) {
           </motion.div>
           {selectionMode === "none" && (
             <Button
-              className="bg-red-600 pressed:bg-red-700 cursor-default text-lg outline-none border-none transition-colors text-white flex items-center absolute top-0 left-[100%] py-2 h-full z-0 isolate focus-visible:outline focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
+              className="bg-red-600 pressed:bg-red-700 cursor-default text-lg outline-hidden border-none transition-colors text-white flex items-center absolute top-0 left-[100%] py-2 h-full z-0 isolate focus-visible:outline focus-visible:outline-blue-600 focus-visible:-outline-offset-2"
               style={{
                 // Calculate the size of the button based on the drag position,
                 // which is stored in a CSS variable above.
@@ -308,7 +308,7 @@ function SelectionCheckmark({ isSelected }) {
       aria-hidden="true"
       viewBox="0 0 24 24"
       fill="currentColor"
-      className="w-6 h-6 flex-shrink-0 ml-4"
+      className="w-6 h-6 shrink-0 ml-4"
       initial={{ x: -40 }}
       animate={{ x: 0 }}
       transition={{ duration: 0.25 }}
diff --git a/packages/react-aria-components/docs/examples/loading-progress.mdx b/packages/react-aria-components/docs/examples/loading-progress.mdx
index 8f20dd9725e..e275f58549e 100644
--- a/packages/react-aria-components/docs/examples/loading-progress.mdx
+++ b/packages/react-aria-components/docs/examples/loading-progress.mdx
@@ -36,7 +36,7 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {ProgressBar, Label} from 'react-aria-components';
 
-<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-12 rounded-lg flex justify-center">
+<div className="bg-linear-to-r from-blue-600 to-purple-600 p-12 rounded-lg flex justify-center">
   <ProgressBar value={30} className="flex flex-col gap-3 w-56 text-white">
     {({percentage, valueText}) => <>
       <div className="flex">
diff --git a/packages/react-aria-components/docs/examples/notifications-popover.mdx b/packages/react-aria-components/docs/examples/notifications-popover.mdx
index b64c4f4242a..27ffb1cb659 100644
--- a/packages/react-aria-components/docs/examples/notifications-popover.mdx
+++ b/packages/react-aria-components/docs/examples/notifications-popover.mdx
@@ -44,9 +44,9 @@ import ChatIcon from '@spectrum-icons/workflow/Chat';
 
 function PopoverExample() {
   return (
-    <div className="bg-gradient-to-r from-orange-400 to-pink-600 p-8 rounded-lg sm:h-[300px] flex items-start justify-center">
+    <div className="bg-linear-to-r from-orange-400 to-pink-600 p-8 rounded-lg sm:h-[300px] flex items-start justify-center">
       <DialogTrigger>
-        <Button aria-label="Notifications" className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-none focus-visible:ring-2 focus-visible:ring-white/75">
+        <Button aria-label="Notifications" className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75">
           <BellIcon size="S" />
         </Button>
         <MyPopover>
@@ -55,7 +55,7 @@ function PopoverExample() {
               <path d="M0 0L6 6L12 0" />
             </svg>
           </OverlayArrow>
-          <Dialog className="p-2 outline-none text-gray-700">
+          <Dialog className="p-2 outline-hidden text-gray-700">
             <div className="flex flex-col">
               <Notification avatar="https://images.unsplash.com/photo-1569913486515-b74bf7751574?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" name="Sonja Balmann" time="2h" text="This looks great! Let's ship it." />
               <Notification avatar="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" name="Maia Pettegree" time="4h" text="Can you add a bit more pizzazz?" />
@@ -82,7 +82,7 @@ function MyPopover(props: PopoverProps) {
 
 function Notification({avatar, name, time, text}) {
   return (
-    <Link href="#" className="p-2 rounded-lg hover:bg-gray-100 grid grid-cols-[theme(width.5)_1fr_theme(width.4)] gap-x-2 text-[inherit] no-underline outline-none focus-visible:ring-2 ring-pink-800">
+    <Link href="#" className="p-2 rounded-lg hover:bg-gray-100 grid grid-cols-[theme(width.5)_1fr_theme(width.4)] gap-x-2 text-[inherit] no-underline outline-hidden focus-visible:ring-2 ring-pink-800">
       <img src={avatar} className="rounded-full w-5 h-5 row-span-3" />
       <div className="text-gray-800 font-semibold leading-5">{name}</div>
       <div className="text-gray-400"><ChatIcon size="XS" /></div>
diff --git a/packages/react-aria-components/docs/examples/opacity-slider.mdx b/packages/react-aria-components/docs/examples/opacity-slider.mdx
index 851bc0278f9..8e964e31126 100644
--- a/packages/react-aria-components/docs/examples/opacity-slider.mdx
+++ b/packages/react-aria-components/docs/examples/opacity-slider.mdx
@@ -36,7 +36,7 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {Slider, Label, SliderOutput, SliderTrack, SliderThumb} from 'react-aria-components';
 
-<div className="bg-gradient-to-r from-purple-600 to-pink-600 p-12 rounded-lg flex justify-center">
+<div className="bg-linear-to-r from-purple-600 to-pink-600 p-12 rounded-lg flex justify-center">
   <Slider defaultValue={30} className="w-[250px]">
     <div className="flex text-white">
       <Label className="flex-1">Opacity</Label>
@@ -48,7 +48,7 @@ import {Slider, Label, SliderOutput, SliderTrack, SliderThumb} from 'react-aria-
         <div className="absolute h-2 top-[50%] translate-y-[-50%] w-full rounded-full bg-white/40" />
         {/* fill */}
         <div className="absolute h-2 top-[50%] translate-y-[-50%] rounded-full bg-white" style={{width: state.getThumbPercent(0) * 100 + '%'}} />
-        <SliderThumb className="h-7 w-7 top-[50%] rounded-full border border-solid border-purple-800/75 bg-white transition dragging:bg-purple-100 outline-none focus-visible:ring-2 ring-black" />
+        <SliderThumb className="h-7 w-7 top-[50%] rounded-full border border-solid border-purple-800/75 bg-white transition dragging:bg-purple-100 outline-hidden focus-visible:ring-2 ring-black" />
       </>}
     </SliderTrack>
   </Slider>
diff --git a/packages/react-aria-components/docs/examples/ripple-button.mdx b/packages/react-aria-components/docs/examples/ripple-button.mdx
index d5792409335..3eb23927a0c 100644
--- a/packages/react-aria-components/docs/examples/ripple-button.mdx
+++ b/packages/react-aria-components/docs/examples/ripple-button.mdx
@@ -57,13 +57,13 @@ function RippleButton(props) {
   }, []);
 
   return (
-    <div className="bg-gradient-to-r from-teal-300 to-cyan-500 p-12 rounded-lg flex justify-center">
+    <div className="bg-linear-to-r from-teal-300 to-cyan-500 p-12 rounded-lg flex justify-center">
       <Button
         onPress={onPress}
         className={`
       relative overflow-hidden
       inline-flex items-center justify-center rounded-md bg-black bg-opacity-50 bg-clip-padding border border-white/20 px-6 py-4 text-white text-lg
-      hover:bg-opacity-60 pressed:bg-opacity-70 transition-colors cursor-default outline-none focus-visible:ring-2 focus-visible:ring-white/75`}>
+      hover:bg-opacity-60 pressed:bg-opacity-70 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75`}>
       {coords && (
         <div
           key={`${coords.x},${coords.y}`}
diff --git a/packages/react-aria-components/docs/examples/shipping-radio.mdx b/packages/react-aria-components/docs/examples/shipping-radio.mdx
index 3d96c59b388..95bd11ec759 100644
--- a/packages/react-aria-components/docs/examples/shipping-radio.mdx
+++ b/packages/react-aria-components/docs/examples/shipping-radio.mdx
@@ -39,7 +39,7 @@ import CheckCircleIcon from '@spectrum-icons/workflow/CheckmarkCircle';
 
 function RadioGroupExample() {
   return (
-    <div className="bg-gradient-to-r from-blue-300 to-indigo-300 p-2 sm:p-8 rounded-lg flex justify-center">
+    <div className="bg-linear-to-r from-blue-300 to-indigo-300 p-2 sm:p-8 rounded-lg flex justify-center">
       <RadioGroup className="flex flex-col gap-2 w-full max-w-[300px]" defaultValue="Standard">
         <Label className="text-xl text-slate-900 font-semibold font-serif">Shipping</Label>
         <ShippingOption name="Standard" time="4-10 business days" price="$4.99" />
@@ -53,7 +53,7 @@ function RadioGroupExample() {
 function ShippingOption({name, time, price}) {
   return (
     <Radio value={name} className={({isFocusVisible, isSelected, isPressed}) => `
-      group relative flex cursor-default rounded-lg px-4 py-3 shadow-lg outline-none bg-clip-padding border border-solid
+      group relative flex cursor-default rounded-lg px-4 py-3 shadow-lg outline-hidden bg-clip-padding border border-solid
       ${isFocusVisible ? 'ring-2 ring-blue-600 ring-offset-1 ring-offset-white/80' : ''}
       ${isSelected ? 'bg-blue-600 border-white/30 text-white' : 'border-transparent'}
       ${isPressed && !isSelected ? 'bg-blue-50' : ''}
diff --git a/packages/react-aria-components/docs/examples/status-select.mdx b/packages/react-aria-components/docs/examples/status-select.mdx
index 5b3b101b765..c67a61f7da9 100644
--- a/packages/react-aria-components/docs/examples/status-select.mdx
+++ b/packages/react-aria-components/docs/examples/status-select.mdx
@@ -44,15 +44,15 @@ import CheckIcon from '@spectrum-icons/workflow/Checkmark';
 
 function SelectExample() {
   return (
-    <div className="bg-gradient-to-tl from-amber-500 to-rose-700 p-8 sm:h-[250px] rounded-lg flex justify-center">
+    <div className="bg-linear-to-tl from-amber-500 to-rose-700 p-8 sm:h-[250px] rounded-lg flex justify-center">
       <Select className="flex flex-col gap-1 w-[200px]">
         <Label className="text-white cursor-default">Status</Label>
-        <Button className="flex items-center cursor-default rounded-lg border-0 bg-white bg-opacity-90 pressed:bg-opacity-100 transition py-2 pl-5 pr-2 text-base text-left leading-normal shadow-md text-gray-700 focus:outline-none focus-visible:ring-2 ring-white ring-offset-2 ring-offset-rose-700">
+        <Button className="flex items-center cursor-default rounded-lg border-0 bg-white bg-opacity-90 pressed:bg-opacity-100 transition py-2 pl-5 pr-2 text-base text-left leading-normal shadow-md text-gray-700 focus:outline-hidden focus-visible:ring-2 ring-white ring-offset-2 ring-offset-rose-700">
           <SelectValue className="flex-1 truncate placeholder-shown:italic" />
           <ChevronUpDownIcon size="XS" />
         </Button>
-        <Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
-          <ListBox className="outline-none p-1">
+        <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
+          <ListBox className="outline-hidden p-1">
             <StatusItem textValue="Backlog">
               <Status className="bg-gray-500" />
               Backlog
@@ -84,7 +84,7 @@ function StatusItem(props: ListBoxItemProps & {children: React.ReactNode}) {
   return (
     <ListBoxItem
       {...props}
-      className="group flex items-center gap-2 cursor-default select-none py-2 px-4 outline-none rounded text-gray-900 focus:bg-rose-600 focus:text-white">
+      className="group flex items-center gap-2 cursor-default select-none py-2 px-4 outline-hidden rounded-sm text-gray-900 focus:bg-rose-600 focus:text-white">
       {({ isSelected }) => (
         <>
           <span className="flex-1 flex items-center gap-2 truncate font-normal group-selected:font-medium">{props.children}</span>
diff --git a/packages/react-aria-components/docs/examples/stock-table.mdx b/packages/react-aria-components/docs/examples/stock-table.mdx
index f954be5d545..2b28455adf5 100644
--- a/packages/react-aria-components/docs/examples/stock-table.mdx
+++ b/packages/react-aria-components/docs/examples/stock-table.mdx
@@ -105,8 +105,8 @@ function StockTableExample() {
   }, [sortDescriptor]);
 
   return (
-    <div className="bg-gradient-to-r from-indigo-500 to-violet-500 p-8 rounded-lg flex items-center justify-center md:col-span-2">
-      <ResizableTableContainer className="max-h-[280px] w-full overflow-auto scroll-pt-[2.321rem] relative bg-white rounded-lg shadow text-gray-600">
+    <div className="bg-linear-to-r from-indigo-500 to-violet-500 p-8 rounded-lg flex items-center justify-center md:col-span-2">
+      <ResizableTableContainer className="max-h-[280px] w-full overflow-auto scroll-pt-[2.321rem] relative bg-white rounded-lg shadow-sm text-gray-600">
         <Table aria-label="Stocks" selectionMode="multiple" selectionBehavior="replace" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor} className="border-separate border-spacing-0">
           <TableHeader>
             <StockColumn id="symbol" allowsSorting>Symbol</StockColumn>
@@ -118,7 +118,7 @@ function StockTableExample() {
           <TableBody items={sortedItems}>
             {item => (
               <StockRow>
-                <StockCell><span className="font-mono bg-slate-100 border border-slate-200 rounded px-1 group-selected:bg-slate-700 group-selected:border-slate-800">${item.symbol}</span></StockCell>
+                <StockCell><span className="font-mono bg-slate-100 border border-slate-200 rounded-sm px-1 group-selected:bg-slate-700 group-selected:border-slate-800">${item.symbol}</span></StockCell>
                 <StockCell className="font-semibold">{item.name}</StockCell>
                 <StockCell>{item.marketCap}</StockCell>
                 <StockCell>{item.sector}</StockCell>
@@ -134,10 +134,10 @@ function StockTableExample() {
 
 function StockColumn(props: ColumnProps & {children: React.ReactNode}) {
   return (
-    <Column {...props} className="sticky top-0 p-0 border-0 border-b border-solid border-slate-300 bg-slate-200 font-bold text-left cursor-default first:rounded-tl-lg last:rounded-tr-lg whitespace-nowrap outline-none">
+    <Column {...props} className="sticky top-0 p-0 border-0 border-b border-solid border-slate-300 bg-slate-200 font-bold text-left cursor-default first:rounded-tl-lg last:rounded-tr-lg whitespace-nowrap outline-hidden">
       {({allowsSorting, sortDirection}) => (
         <div className="flex items-center pl-4 py-1">
-          <Group role="presentation" tabIndex={-1} className="flex flex-1 items-center overflow-hidden outline-none rounded focus-visible:ring-2 ring-slate-600">
+          <Group role="presentation" tabIndex={-1} className="flex flex-1 items-center overflow-hidden outline-hidden rounded-sm focus-visible:ring-2 ring-slate-600">
             <span className="flex-1 truncate">{props.children}</span>
             {allowsSorting && (
               <span className={`ml-1 w-4 h-4 flex items-center justify-center transition ${sortDirection === 'descending' ? 'rotate-180' : ''}`}>
@@ -145,7 +145,7 @@ function StockColumn(props: ColumnProps & {children: React.ReactNode}) {
               </span>
             )}
           </Group>
-          <ColumnResizer className="w-px px-[8px] py-1 h-5 bg-clip-content bg-slate-400 cursor-col-resize rounded resizing:bg-slate-800 resizing:w-[2px] resizing:pl-[7px] focus-visible:ring-2 ring-slate-600 ring-inset" />
+          <ColumnResizer className="w-px px-[8px] py-1 h-5 bg-clip-content bg-slate-400 cursor-col-resize rounded-sm resizing:bg-slate-800 resizing:w-[2px] resizing:pl-[7px] focus-visible:ring-2 ring-slate-600 ring-inset" />
         </div>
       )}
     </Column>
@@ -153,7 +153,7 @@ function StockColumn(props: ColumnProps & {children: React.ReactNode}) {
 }
 
 function StockRow<T extends object>(props: RowProps<T>) {
-  return <Row {...props} className="even:bg-slate-100 selected:bg-slate-600 selected:text-white cursor-default group outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-slate-600 focus-visible:-outline-offset-4 selected:focus-visible:outline-white" />;
+  return <Row {...props} className="even:bg-slate-100 selected:bg-slate-600 selected:text-white cursor-default group outline-hidden focus-visible:outline focus-visible:outline-2 focus-visible:outline-slate-600 focus-visible:-outline-offset-4 selected:focus-visible:outline-white" />;
 }
 
 function StockCell(props: CellProps) {
diff --git a/packages/react-aria-components/docs/examples/swipeable-tabs.mdx b/packages/react-aria-components/docs/examples/swipeable-tabs.mdx
index 5a12c4c9eba..6d0763d5e2b 100644
--- a/packages/react-aria-components/docs/examples/swipeable-tabs.mdx
+++ b/packages/react-aria-components/docs/examples/swipeable-tabs.mdx
@@ -169,7 +169,7 @@ function AnimatedTabs() {
       <div className="relative">
         <TabList ref={tabListRef} className="flex -mx-1" items={tabs}>
           {(tab) =>
-            <Tab className="cursor-default px-3 py-1.5 text-md transition outline-none touch-none">
+            <Tab className="cursor-default px-3 py-1.5 text-md transition outline-hidden touch-none">
               {({ isSelected, isFocusVisible }) => <>
                 {tab.label}
                 {isFocusVisible && isSelected && (
@@ -195,7 +195,7 @@ function AnimatedTabs() {
           {(tab) => (
             <TabPanel
               shouldForceMount
-              className="flex-shrink-0 w-full px-2 box-border snap-start outline-none -outline-offset-2 rounded focus-visible:outline-black">
+              className="shrink-0 w-full px-2 box-border snap-start outline-hidden -outline-offset-2 rounded-sm focus-visible:outline-black">
               <h2>{tab.label} contents...</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet nisl blandit, pellentesque eros eu, scelerisque eros. Sed cursus urna at nunc lacinia dapibus.</p>
             </TabPanel>
diff --git a/packages/react-aria-components/docs/examples/tailwind.config.js b/packages/react-aria-components/docs/examples/tailwind.config.js
deleted file mode 100644
index eb73307cd8f..00000000000
--- a/packages/react-aria-components/docs/examples/tailwind.config.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  corePlugins: {
-    preflight: false
-  },
-  darkMode: ['class', '[style*="color-scheme: dark"]'],
-  content: {
-    relative: true,
-    files: ['*.mdx']
-  },
-  theme: {
-    extend: {}
-  },
-  plugins: [
-    require('tailwindcss-react-aria-components'),
-    require('tailwindcss-animate')
-  ]
-};
diff --git a/packages/react-aria-components/docs/examples/tailwind.global.css b/packages/react-aria-components/docs/examples/tailwind.global.css
index 3eb13d420ca..5addcc63195 100644
--- a/packages/react-aria-components/docs/examples/tailwind.global.css
+++ b/packages/react-aria-components/docs/examples/tailwind.global.css
@@ -1,4 +1,3 @@
-@config "./tailwind.config.js";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+/* @config "./tailwind.config.js"; */
diff --git a/packages/react-aria-components/docs/examples/user-combobox.mdx b/packages/react-aria-components/docs/examples/user-combobox.mdx
index e231b38e5f9..5a84ddf9e28 100644
--- a/packages/react-aria-components/docs/examples/user-combobox.mdx
+++ b/packages/react-aria-components/docs/examples/user-combobox.mdx
@@ -96,17 +96,17 @@ import CheckIcon from '@spectrum-icons/workflow/Checkmark';
 
 function ComboBoxExample() {
   return (
-    <div className="bg-gradient-to-r from-sky-300 to-cyan-300 p-8 sm:h-[300px] rounded-lg flex justify-center">
+    <div className="bg-linear-to-r from-sky-300 to-cyan-300 p-8 sm:h-[300px] rounded-lg flex justify-center">
       <ComboBox className="group flex flex-col gap-1 w-[200px]">
         <Label className="text-black cursor-default">Assignee</Label>
         <Group className="flex rounded-lg bg-white bg-opacity-90 focus-within:bg-opacity-100 transition shadow-md ring-1 ring-black/10 focus-visible:ring-2 focus-visible:ring-black">
-          <Input className="flex-1 w-full border-none py-2 px-3 leading-5 text-gray-900 bg-transparent outline-none text-base" />
+          <Input className="flex-1 w-full border-none py-2 px-3 leading-5 text-gray-900 bg-transparent outline-hidden text-base" />
           <Button className="px-3 flex items-center text-gray-700 transition border-0 border-solid border-l border-l-sky-200 bg-transparent rounded-r-lg pressed:bg-sky-100">
             <ChevronUpDownIcon size="XS" />
           </Button>
         </Group>
-        <Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
-          <ListBox className="outline-none p-1" items={people}>
+        <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out">
+          <ListBox className="outline-hidden p-1" items={people}>
             {item => (
               <UserItem textValue={item.name}>
                 <img alt="" src={item.avatar} className="w-6 h-6 rounded-full" />
@@ -124,7 +124,7 @@ function UserItem(props: ListBoxItemProps & {children: React.ReactNode}) {
   return (
     <ListBoxItem
       {...props}
-      className="group flex items-center gap-2 cursor-default select-none py-2 pl-2 pr-4 outline-none rounded text-gray-900 focus:bg-sky-600 focus:text-white">
+      className="group flex items-center gap-2 cursor-default select-none py-2 pl-2 pr-4 outline-hidden rounded-sm text-gray-900 focus:bg-sky-600 focus:text-white">
       {({ isSelected }) => (
         <>
           <span className="flex-1 flex items-center gap-3 truncate font-normal group-selected:font-medium">{props.children}</span>
diff --git a/packages/react-aria-components/docs/examples/wifi-switch.mdx b/packages/react-aria-components/docs/examples/wifi-switch.mdx
index 7b05e25a0c7..92d86dd737e 100644
--- a/packages/react-aria-components/docs/examples/wifi-switch.mdx
+++ b/packages/react-aria-components/docs/examples/wifi-switch.mdx
@@ -36,10 +36,10 @@ import './tailwind.global.css';
 ```tsx example standalone
 import {Switch} from 'react-aria-components';
 
-<div className="bg-gradient-to-r from-yellow-300 to-orange-300 p-12 rounded-lg flex justify-center">
+<div className="bg-linear-to-r from-yellow-300 to-orange-300 p-12 rounded-lg flex justify-center">
   <Switch className="group flex gap-2 items-center text-black font-semibold text-lg">
-    <div className="flex h-[26px] w-[44px] shrink-0 cursor-default rounded-full shadow-inner bg-clip-padding border border-solid border-white/30 p-[3px] box-border transition duration-200 ease-in-out bg-yellow-600 group-pressed:bg-yellow-700 group-selected:bg-amber-800 group-selected:group-pressed:bg-amber-900 outline-none group-focus-visible:ring-2 ring-black">
-      <span className="h-[18px] w-[18px] transform rounded-full bg-white shadow transition duration-200 ease-in-out translate-x-0 group-selected:translate-x-[100%]" />
+    <div className="flex h-[26px] w-[44px] shrink-0 cursor-default rounded-full shadow-inner bg-clip-padding border border-solid border-white/30 p-[3px] box-border transition duration-200 ease-in-out bg-yellow-600 group-pressed:bg-yellow-700 group-selected:bg-amber-800 group-selected:group-pressed:bg-amber-900 outline-hidden group-focus-visible:ring-2 ring-black">
+      <span className="h-[18px] w-[18px] transform rounded-full bg-white shadow-sm transition duration-200 ease-in-out translate-x-0 group-selected:translate-x-[100%]" />
     </div>
     Wi-Fi
   </Switch>
diff --git a/packages/react-aria-components/package.json b/packages/react-aria-components/package.json
index f29b0767168..a6ba52df7d3 100644
--- a/packages/react-aria-components/package.json
+++ b/packages/react-aria-components/package.json
@@ -78,5 +78,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0"
   }
 }
diff --git a/starters/tailwind/.postcssrc b/starters/tailwind/.postcssrc
index abae8bb7ca2..e092dc7c1ef 100644
--- a/starters/tailwind/.postcssrc
+++ b/starters/tailwind/.postcssrc
@@ -1,6 +1,5 @@
 {
   "plugins": {
-    "autoprefixer": {},
-    "tailwindcss": {}
+    "@tailwindcss/postcss": {}
   }
 }
diff --git a/starters/tailwind/src/Checkbox.tsx b/starters/tailwind/src/Checkbox.tsx
index d925014b14b..4f629f7f9d2 100644
--- a/starters/tailwind/src/Checkbox.tsx
+++ b/starters/tailwind/src/Checkbox.tsx
@@ -35,17 +35,17 @@ const checkboxStyles = tv({
 
 const boxStyles = tv({
   extend: focusRing,
-  base: 'w-5 h-5 flex-shrink-0 rounded flex items-center justify-center border-2 transition',
+  base: 'w-5 h-5 shrink-0 rounded-xs flex items-center justify-center border-2 transition',
   variants: {
     isSelected: {
-      false: 'bg-white dark:bg-zinc-900 border-[--color] [--color:theme(colors.gray.400)] dark:[--color:colors.zinc-400)] group-pressed:[--color:theme(colors.gray.500)] dark:group-pressed:[--color:theme(colors.zinc.300)]',
-      true: 'bg-[--color] border-[--color] [--color:theme(colors.gray.700)] group-pressed:[--color:theme(colors.gray.800)] dark:[--color:theme(colors.slate.300)] dark:group-pressed:[--color:theme(colors.slate.200)] forced-colors:![--color:Highlight]'
+      false: 'bg-white dark:bg-zinc-900 border-(--color) [--color:var(--color-gray-400)] dark:[--color:colors.zinc-400)] group-pressed:[--color:var(--color-gray-500)] dark:group-pressed:[--color:var(--color-zinc-300)]',
+      true: 'bg-(--color) border-(--color) [--color:var(--color-gray-700)] group-pressed:[--color:var(--color-gray-800)] dark:[--color:var(--color-slate-300)] dark:group-pressed:[--color:var(--color-slate-200)] forced-colors:[--color:Highlight]!'
     },
     isInvalid: {
-      true: '[--color:theme(colors.red.700)] dark:[--color:theme(colors.red.600)] forced-colors:![--color:Mark] group-pressed:[--color:theme(colors.red.800)] dark:group-pressed:[--color:theme(colors.red.700)]'
+      true: '[--color:var(--color-red-700)] dark:[--color:var(--color-red-600)] forced-colors:[--color:Mark]! group-pressed:[--color:var(--color-red-800)] dark:group-pressed:[--color:var(--color-red-700)]'
     },
     isDisabled: {
-      true: '[--color:theme(colors.gray.200)] dark:[--color:theme(colors.zinc.700)] forced-colors:![--color:GrayText]'
+      true: '[--color:var(--color-gray-200)] dark:[--color:var(--color-zinc-700)] forced-colors:[--color:GrayText]!'
     }
   }
 });
diff --git a/starters/tailwind/src/ColorPicker.tsx b/starters/tailwind/src/ColorPicker.tsx
index 75e1c063aa5..9eeade2ded8 100644
--- a/starters/tailwind/src/ColorPicker.tsx
+++ b/starters/tailwind/src/ColorPicker.tsx
@@ -11,7 +11,7 @@ import { focusRing } from './utils';
 
 const buttonStyles = tv({
   extend: focusRing,
-  base: 'flex gap-2 items-center cursor-default rounded text-sm text-gray-800 dark:text-gray-200'
+  base: 'flex gap-2 items-center cursor-default rounded-xs text-sm text-gray-800 dark:text-gray-200'
 });
 
 export interface ColorPickerProps extends AriaColorPickerProps {
diff --git a/starters/tailwind/src/ColorSwatch.tsx b/starters/tailwind/src/ColorSwatch.tsx
index 8b254a9e508..d0636fb21bb 100644
--- a/starters/tailwind/src/ColorSwatch.tsx
+++ b/starters/tailwind/src/ColorSwatch.tsx
@@ -6,7 +6,7 @@ export function ColorSwatch(props: ColorSwatchProps) {
   return (
     <AriaColorSwatch 
       {...props}
-      className={composeTailwindRenderProps(props.className, 'w-8 h-8 rounded border border-black/10')}
+      className={composeTailwindRenderProps(props.className, 'w-8 h-8 rounded-xs border border-black/10')}
       style={({color}) => ({
         background: `linear-gradient(${color}, ${color}),
           repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
diff --git a/starters/tailwind/src/ColorSwatchPicker.tsx b/starters/tailwind/src/ColorSwatchPicker.tsx
index 2dc7540e756..28916e5a950 100644
--- a/starters/tailwind/src/ColorSwatchPicker.tsx
+++ b/starters/tailwind/src/ColorSwatchPicker.tsx
@@ -21,7 +21,7 @@ export function ColorSwatchPicker(
 
 const itemStyles = tv({
   extend: focusRing,
-  base: 'relative rounded'
+  base: 'relative rounded-xs'
 });
 
 export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {
@@ -29,7 +29,7 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps) {
     <AriaColorSwatchPickerItem {...props} className={itemStyles}>
       {({isSelected}) => <>
         <ColorSwatch />
-        {isSelected && <div className="absolute top-0 left-0 w-full h-full border border-2 border-black dark:border-white outline outline-2 outline-white dark:outline-black -outline-offset-4 rounded forced-color-adjust-none" />}
+        {isSelected && <div className="absolute top-0 left-0 w-full h-full border border-2 border-black dark:border-white outline outline-2 outline-white dark:outline-black -outline-offset-4 rounded-xs forced-color-adjust-none" />}
       </>}
     </AriaColorSwatchPickerItem>
   );
diff --git a/starters/tailwind/src/ColorWheel.tsx b/starters/tailwind/src/ColorWheel.tsx
index 0ab80b85a91..746e27b0d53 100644
--- a/starters/tailwind/src/ColorWheel.tsx
+++ b/starters/tailwind/src/ColorWheel.tsx
@@ -8,7 +8,7 @@ export function ColorWheel(props: ColorWheelProps) {
   return (
     <AriaColorWheel {...props} outerRadius={100} innerRadius={74}>
       <ColorWheelTrack
-        className="disabled:bg-gray-300 disabled:dark:bg-zinc-800 disabled:forced-colors:bg-[GrayText]"
+        className="disabled:bg-gray-300 dark:disabled:bg-zinc-800 forced-colors:disabled:bg-[GrayText]"
         style={({ defaultStyle, isDisabled }) => ({
           ...defaultStyle,
           background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
diff --git a/starters/tailwind/src/ComboBox.tsx b/starters/tailwind/src/ComboBox.tsx
index 073a1f73ab5..4a3b70452ff 100644
--- a/starters/tailwind/src/ComboBox.tsx
+++ b/starters/tailwind/src/ComboBox.tsx
@@ -28,13 +28,13 @@ export function ComboBox<T extends object>(
       <Label>{label}</Label>
       <FieldGroup>
         <Input />
-        <Button variant="icon" className="w-6 mr-1 rounded outline-offset-0 ">
+        <Button variant="icon" className="w-6 mr-1 rounded-xs outline-offset-0 ">
           <ChevronDown aria-hidden className="w-4 h-4" />
         </Button>
       </FieldGroup>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover className="w-[--trigger-width]">
+      <Popover className="w-(--trigger-width)">
         <ListBox items={items} className="outline-0 p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]">
           {children}
         </ListBox>
diff --git a/starters/tailwind/src/DateField.tsx b/starters/tailwind/src/DateField.tsx
index 475c5b56efd..60cc1cfe0a5 100644
--- a/starters/tailwind/src/DateField.tsx
+++ b/starters/tailwind/src/DateField.tsx
@@ -32,7 +32,7 @@ export function DateField<T extends DateValue>(
 }
 
 const segmentStyles = tv({
-  base: 'inline p-0.5 type-literal:px-0 rounded outline outline-0 forced-color-adjust-none caret-transparent text-gray-800 dark:text-zinc-200 forced-colors:text-[ButtonText]',
+  base: 'inline p-0.5 type-literal:px-0 rounded-xs outline outline-0 forced-color-adjust-none caret-transparent text-gray-800 dark:text-zinc-200 forced-colors:text-[ButtonText]',
   variants: {
     isPlaceholder: {
       true: 'text-gray-600 dark:text-zinc-400 italic'
diff --git a/starters/tailwind/src/DatePicker.tsx b/starters/tailwind/src/DatePicker.tsx
index f881e51c713..e5846f8948b 100644
--- a/starters/tailwind/src/DatePicker.tsx
+++ b/starters/tailwind/src/DatePicker.tsx
@@ -29,7 +29,7 @@ export function DatePicker<T extends DateValue>(
       {label && <Label>{label}</Label>}
       <FieldGroup className="min-w-[208px] w-auto">
         <DateInput className="flex-1 min-w-[150px] px-2 py-1.5 text-sm" />
-        <Button variant="icon" className="w-6 mr-1 rounded outline-offset-0">
+        <Button variant="icon" className="w-6 mr-1 rounded-xs outline-offset-0">
           <CalendarIcon aria-hidden className="w-4 h-4" />
         </Button>
       </FieldGroup>
diff --git a/starters/tailwind/src/DateRangePicker.tsx b/starters/tailwind/src/DateRangePicker.tsx
index f3da0e495e7..67164b363d9 100644
--- a/starters/tailwind/src/DateRangePicker.tsx
+++ b/starters/tailwind/src/DateRangePicker.tsx
@@ -29,9 +29,9 @@ export function DateRangePicker<T extends DateValue>(
       {label && <Label>{label}</Label>}
       <FieldGroup className="min-w-[208px] w-auto">
         <DateInput slot="start" className="px-2 py-1.5 text-sm" />
-        <span aria-hidden="true" className="text-gray-800 dark:text-zinc-200 forced-colors:text-[ButtonText] group-disabled:text-gray-200 group-disabled:dark:text-zinc-600 group-disabled:forced-colors:text-[GrayText]">–</span>
+        <span aria-hidden="true" className="text-gray-800 dark:text-zinc-200 forced-colors:text-[ButtonText] group-disabled:text-gray-200 dark:group-disabled:text-zinc-600 forced-colors:group-disabled:text-[GrayText]">–</span>
         <DateInput slot="end" className="flex-1 px-2 py-1.5 text-sm" />
-        <Button variant="icon" className="w-6 mr-1 rounded outline-offset-0">
+        <Button variant="icon" className="w-6 mr-1 rounded-xs outline-offset-0">
           <CalendarIcon aria-hidden className="w-4 h-4" />
         </Button>
       </FieldGroup>
diff --git a/starters/tailwind/src/Link.tsx b/starters/tailwind/src/Link.tsx
index 0d4a5f54df6..f1f8eb2532a 100644
--- a/starters/tailwind/src/Link.tsx
+++ b/starters/tailwind/src/Link.tsx
@@ -9,7 +9,7 @@ interface LinkProps extends AriaLinkProps {
 
 const styles = tv({
   extend: focusRing,
-  base: 'underline disabled:no-underline disabled:cursor-default forced-colors:disabled:text-[GrayText] transition rounded',
+  base: 'underline disabled:no-underline disabled:cursor-default forced-colors:disabled:text-[GrayText] transition rounded-xs',
   variants: {
     variant: {
       primary: 'text-blue-600 dark:text-blue-500 underline decoration-blue-600/60 hover:decoration-blue-600 dark:decoration-blue-500/60 dark:hover:decoration-blue-500',
diff --git a/starters/tailwind/src/Modal.tsx b/starters/tailwind/src/Modal.tsx
index 67726972a5c..441c0d6120f 100644
--- a/starters/tailwind/src/Modal.tsx
+++ b/starters/tailwind/src/Modal.tsx
@@ -3,7 +3,7 @@ import { ModalOverlay, ModalOverlayProps, Modal as RACModal } from 'react-aria-c
 import { tv } from 'tailwind-variants';
 
 const overlayStyles = tv({
-  base: 'fixed top-0 left-0 w-full h-[--visual-viewport-height] isolate z-20 bg-black/[15%] flex items-center justify-center p-4 text-center backdrop-blur-lg',
+  base: 'fixed top-0 left-0 w-full h-(--visual-viewport-height) isolate z-20 bg-black/[15%] flex items-center justify-center p-4 text-center backdrop-blur-lg',
   variants: {
     isEntering: {
       true: 'animate-in fade-in duration-200 ease-out'
diff --git a/starters/tailwind/src/RadioGroup.tsx b/starters/tailwind/src/RadioGroup.tsx
index 202710543e8..55e6852636e 100644
--- a/starters/tailwind/src/RadioGroup.tsx
+++ b/starters/tailwind/src/RadioGroup.tsx
@@ -30,13 +30,13 @@ const styles = tv({
   variants: {
     isSelected: {
       false: 'border-gray-400 dark:border-zinc-400 group-pressed:border-gray-500 dark:group-pressed:border-zinc-300',
-      true: 'border-[7px] border-gray-700 dark:border-slate-300 forced-colors:!border-[Highlight] group-pressed:border-gray-800 dark:group-pressed:border-slate-200'
+      true: 'border-[7px] border-gray-700 dark:border-slate-300 forced-colors:border-[Highlight]! group-pressed:border-gray-800 dark:group-pressed:border-slate-200'
     },
     isInvalid: {
-      true: 'border-red-700 dark:border-red-600 group-pressed:border-red-800 dark:group-pressed:border-red-700 forced-colors:!border-[Mark]'
+      true: 'border-red-700 dark:border-red-600 group-pressed:border-red-800 dark:group-pressed:border-red-700 forced-colors:border-[Mark]!'
     },
     isDisabled: {
-      true: 'border-gray-200 dark:border-zinc-700 forced-colors:!border-[GrayText]'
+      true: 'border-gray-200 dark:border-zinc-700 forced-colors:border-[GrayText]!'
     }
   }
 });
diff --git a/starters/tailwind/src/Select.tsx b/starters/tailwind/src/Select.tsx
index 0baf5b27ea1..f602c9112bd 100644
--- a/starters/tailwind/src/Select.tsx
+++ b/starters/tailwind/src/Select.tsx
@@ -46,8 +46,8 @@ export function Select<T extends object>(
       </Button>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover className="min-w-[--trigger-width]">
-        <ListBox items={items} className="outline-none p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]">
+      <Popover className="min-w-(--trigger-width)">
+        <ListBox items={items} className="outline-hidden p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]">
           {children}
         </ListBox>
       </Popover>
diff --git a/starters/tailwind/src/Switch.tsx b/starters/tailwind/src/Switch.tsx
index da5d85f25d5..a4d39d40e1e 100644
--- a/starters/tailwind/src/Switch.tsx
+++ b/starters/tailwind/src/Switch.tsx
@@ -16,16 +16,16 @@ const track = tv({
   variants: {
     isSelected: {
       false: 'bg-gray-400 dark:bg-zinc-400 group-pressed:bg-gray-500 dark:group-pressed:bg-zinc-300',
-      true: 'bg-gray-700 dark:bg-zinc-300 forced-colors:!bg-[Highlight] group-pressed:bg-gray-800 dark:group-pressed:bg-zinc-200',
+      true: 'bg-gray-700 dark:bg-zinc-300 forced-colors:bg-[Highlight]! group-pressed:bg-gray-800 dark:group-pressed:bg-zinc-200',
     },
     isDisabled: {
-      true: 'bg-gray-200 dark:bg-zinc-700 forced-colors:group-selected:!bg-[GrayText] forced-colors:border-[GrayText]',
+      true: 'bg-gray-200 dark:bg-zinc-700 forced-colors:group-selected:bg-[GrayText]! forced-colors:border-[GrayText]',
     }
   }
 });
 
 const handle = tv({
-  base: 'h-3 w-3 transform rounded-full bg-white dark:bg-zinc-900 outline outline-1 -outline-offset-1 outline-transparent shadow transition duration-200 ease-in-out',
+  base: 'h-3 w-3 transform rounded-full bg-white dark:bg-zinc-900 outline outline-1 -outline-offset-1 outline-transparent shadow-xs transition duration-200 ease-in-out',
   variants: {
     isSelected: {
       false: 'translate-x-0',
diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx
index 44e5220c248..3a10c921381 100644
--- a/starters/tailwind/src/Table.tsx
+++ b/starters/tailwind/src/Table.tsx
@@ -39,12 +39,12 @@ const columnStyles = tv({
 
 const resizerStyles = tv({
   extend: focusRing,
-  base: 'w-px px-[8px] translate-x-[8px] box-content py-1 h-5 bg-clip-content bg-gray-400 dark:bg-zinc-500 forced-colors:bg-[ButtonBorder] cursor-col-resize rounded resizing:bg-blue-600 forced-colors:resizing:bg-[Highlight] resizing:w-[2px] resizing:pl-[7px] -outline-offset-2'
+  base: 'w-px px-[8px] translate-x-[8px] box-content py-1 h-5 bg-clip-content bg-gray-400 dark:bg-zinc-500 forced-colors:bg-[ButtonBorder] cursor-col-resize rounded-xs resizing:bg-blue-600 forced-colors:resizing:bg-[Highlight] resizing:w-[2px] resizing:pl-[7px] -outline-offset-2'
 });
 
 export function Column(props: ColumnProps) {
   return (
-    <AriaColumn {...props} className={composeTailwindRenderProps(props.className, '[&:hover]:z-20 [&:focus-within]:z-20 text-start text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-default')}>
+    <AriaColumn {...props} className={composeTailwindRenderProps(props.className, '[&:hover]:z-20 focus-within:z-20 text-start text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-default')}>
       {composeRenderProps(props.children, (children, { allowsSorting, sortDirection }) => (
         <div className="flex items-center">
           <Group
@@ -120,7 +120,7 @@ export function Row<T extends object>(
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'border-b dark:border-b-zinc-700 group-last/row:border-b-0 [--selected-border:theme(colors.blue.200)] dark:[--selected-border:theme(colors.blue.900)] group-selected/row:border-[--selected-border] [:has(+[data-selected])_&]:border-[--selected-border] p-2 truncate -outline-offset-2'
+  base: 'border-b dark:border-b-zinc-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2'
 });
 
 export function Cell(props: CellProps) {
diff --git a/starters/tailwind/src/ToggleButton.tsx b/starters/tailwind/src/ToggleButton.tsx
index 4f6bce13a27..c9cebaf2fd6 100644
--- a/starters/tailwind/src/ToggleButton.tsx
+++ b/starters/tailwind/src/ToggleButton.tsx
@@ -8,11 +8,11 @@ let styles = tv({
   base: 'px-5 py-2 [&:has(svg:only-child)]:px-2 text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 forced-colors:border-[ButtonBorder] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default forced-color-adjust-none',
   variants: {
     isSelected: {
-      false: 'bg-gray-100 hover:bg-gray-200 pressed:bg-gray-300 text-gray-800 dark:bg-zinc-600 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 dark:text-zinc-100 forced-colors:!bg-[ButtonFace] forced-colors:!text-[ButtonText]',
-      true: 'bg-gray-700 hover:bg-gray-800 pressed:bg-gray-900 text-white dark:bg-slate-300 dark:hover:bg-slate-200 dark:pressed:bg-slate-100 dark:text-black forced-colors:!bg-[Highlight] forced-colors:!text-[HighlightText]'
+      false: 'bg-gray-100 hover:bg-gray-200 pressed:bg-gray-300 text-gray-800 dark:bg-zinc-600 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 dark:text-zinc-100 forced-colors:bg-[ButtonFace]! forced-colors:text-[ButtonText]!',
+      true: 'bg-gray-700 hover:bg-gray-800 pressed:bg-gray-900 text-white dark:bg-slate-300 dark:hover:bg-slate-200 dark:pressed:bg-slate-100 dark:text-black forced-colors:bg-[Highlight]! forced-colors:text-[HighlightText]!'
     },
     isDisabled: {
-      true: 'bg-gray-100 dark:bg-zinc-800 forced-colors:!bg-[ButtonFace] text-gray-300 dark:text-zinc-600 forced-colors:!text-[GrayText] border-black/5 dark:border-white/5 forced-colors:border-[GrayText]'
+      true: 'bg-gray-100 dark:bg-zinc-800 forced-colors:bg-[ButtonFace]! text-gray-300 dark:text-zinc-600 forced-colors:text-[GrayText]! border-black/5 dark:border-white/5 forced-colors:border-[GrayText]'
     }
   }
 });
diff --git a/starters/tailwind/src/Tooltip.tsx b/starters/tailwind/src/Tooltip.tsx
index d19618ea645..15facd0d8b1 100644
--- a/starters/tailwind/src/Tooltip.tsx
+++ b/starters/tailwind/src/Tooltip.tsx
@@ -12,7 +12,7 @@ export interface TooltipProps extends Omit<AriaTooltipProps, 'children'> {
 }
 
 const styles = tv({
-  base: 'group bg-slate-700 dark:bg-slate-600 border border-slate-800 dark:border-white/10 shadow-[inset_0_1px_0_0_theme(colors.gray.600)] dark:shadow-none text-white text-sm rounded-lg drop-shadow-lg will-change-transform px-3 py-1',
+  base: 'group bg-slate-700 dark:bg-slate-600 border border-slate-800 dark:border-white/10 shadow-[inset_0_1px_0_0_var(--color-gray-600)] dark:shadow-none text-white text-sm rounded-lg drop-shadow-lg will-change-transform px-3 py-1',
   variants: {
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200'
diff --git a/starters/tailwind/src/index.css b/starters/tailwind/src/index.css
index 2a8127d3be5..85c889ff1a1 100644
--- a/starters/tailwind/src/index.css
+++ b/starters/tailwind/src/index.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.js';
 
 /* Scale up hit targets on high resolution mobile devices. */
 @media (min-resolution: 200dpi) {
diff --git a/starters/tailwind/tailwind.config.js b/starters/tailwind/tailwind.config.js
deleted file mode 100644
index e49a9f8212e..00000000000
--- a/starters/tailwind/tailwind.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-
-module.exports = {
-  content: ["./src/*.{ts,tsx}", "./stories/*.{ts,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    require('tailwindcss-react-aria-components'),
-    require('tailwindcss-animate')
-  ]
-};
diff --git a/yarn.lock b/yarn.lock
index 898fc94894c..d472e7d2031 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10679,6 +10679,150 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/node@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/node@npm:4.0.0"
+  dependencies:
+    enhanced-resolve: "npm:^5.18.0"
+    jiti: "npm:^2.4.2"
+    tailwindcss: "npm:4.0.0"
+  checksum: 10c0/5d7656641f905cdb8dc5ce818b57eb93fd1bd7a52480fe4047882c7175e1b2401b1e7fb6a6027cc785daa52c4107aa8f2998cdbad2195b5cf1d50171db28a55e
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.0.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.0.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.0.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.0.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.0.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.0.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.0.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.0.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/oxide@npm:4.0.0"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.0.0"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.0.0"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.0.0"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.0.0"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.0.0"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.0.0"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.0.0"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/705da4bce9b823fbe0b6996f160c0ef745ff2c118156b30593ef9fec92d9acafb13bff4a335f4b95980fad2663e3f16cb312bdfba62c7f78d356fa5bc66e5e84
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/postcss@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/postcss@npm:4.0.0"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    "@tailwindcss/node": "npm:^4.0.0"
+    "@tailwindcss/oxide": "npm:^4.0.0"
+    lightningcss: "npm:^1.29.1"
+    postcss: "npm:^8.4.41"
+    tailwindcss: "npm:4.0.0"
+  checksum: 10c0/a605393e9939026d8b723f676dfe5ba0bfcfc8dc3c3c26329890b0f9119b1f78ef9c8c6983bdeecbd5dc88bd2700a31f64ebdd386ac4c973ba789237baa8d55c
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^10.0.0, @testing-library/dom@npm:^10.1.0":
   version: 10.1.0
   resolution: "@testing-library/dom@npm:10.1.0"
@@ -16771,6 +16915,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enhanced-resolve@npm:^5.18.0":
+  version: 5.18.0
+  resolution: "enhanced-resolve@npm:5.18.0"
+  dependencies:
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.2.0"
+  checksum: 10c0/5fcc264a6040754ab5b349628cac2bb5f89cee475cbe340804e657a5b9565f70e6aafb338d5895554eb0ced9f66c50f38a255274a0591dcb64ee17c549c459ce
+  languageName: node
+  linkType: hard
+
 "entities@npm:^1.1.1":
   version: 1.1.2
   resolution: "entities@npm:1.1.2"
@@ -22665,6 +22819,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "jiti@npm:2.4.2"
+  bin:
+    jiti: lib/jiti-cli.mjs
+  checksum: 10c0/4ceac133a08c8faff7eac84aabb917e85e8257f5ad659e843004ce76e981c457c390a220881748ac67ba1b940b9b729b30fb85cbaf6e7989f04b6002c94da331
+  languageName: node
+  linkType: hard
+
 "joi@npm:^17.11.0":
   version: 17.13.1
   resolution: "joi@npm:17.13.1"
@@ -23409,6 +23572,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-darwin-arm64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-darwin-arm64@npm:1.29.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "lightningcss-darwin-x64@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-darwin-x64@npm:1.28.2"
@@ -23416,6 +23586,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-darwin-x64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-darwin-x64@npm:1.29.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "lightningcss-freebsd-x64@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-freebsd-x64@npm:1.28.2"
@@ -23423,6 +23600,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-freebsd-x64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-freebsd-x64@npm:1.29.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-arm-gnueabihf@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-linux-arm-gnueabihf@npm:1.28.2"
@@ -23430,6 +23614,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-arm-gnueabihf@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-arm64-gnu@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-linux-arm64-gnu@npm:1.28.2"
@@ -23437,6 +23628,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-arm64-gnu@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.29.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-arm64-musl@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-linux-arm64-musl@npm:1.28.2"
@@ -23444,6 +23642,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-arm64-musl@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm64-musl@npm:1.29.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-x64-gnu@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-linux-x64-gnu@npm:1.28.2"
@@ -23451,6 +23656,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-x64-gnu@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-x64-gnu@npm:1.29.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
 "lightningcss-linux-x64-musl@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-linux-x64-musl@npm:1.28.2"
@@ -23458,6 +23670,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-linux-x64-musl@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-x64-musl@npm:1.29.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
 "lightningcss-win32-arm64-msvc@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-win32-arm64-msvc@npm:1.28.2"
@@ -23465,6 +23684,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-win32-arm64-msvc@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.29.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "lightningcss-win32-x64-msvc@npm:1.28.2":
   version: 1.28.2
   resolution: "lightningcss-win32-x64-msvc@npm:1.28.2"
@@ -23472,6 +23698,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-win32-x64-msvc@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-win32-x64-msvc@npm:1.29.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "lightningcss@npm:^1.22.1":
   version: 1.28.2
   resolution: "lightningcss@npm:1.28.2"
@@ -23512,6 +23745,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss@npm:^1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss@npm:1.29.1"
+  dependencies:
+    detect-libc: "npm:^1.0.3"
+    lightningcss-darwin-arm64: "npm:1.29.1"
+    lightningcss-darwin-x64: "npm:1.29.1"
+    lightningcss-freebsd-x64: "npm:1.29.1"
+    lightningcss-linux-arm-gnueabihf: "npm:1.29.1"
+    lightningcss-linux-arm64-gnu: "npm:1.29.1"
+    lightningcss-linux-arm64-musl: "npm:1.29.1"
+    lightningcss-linux-x64-gnu: "npm:1.29.1"
+    lightningcss-linux-x64-musl: "npm:1.29.1"
+    lightningcss-win32-arm64-msvc: "npm:1.29.1"
+    lightningcss-win32-x64-msvc: "npm:1.29.1"
+  dependenciesMeta:
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10c0/c2f421f8fdbdf7e5fe271f12d18ffaf332a11c88094b2bcfb90c56d6a442281c609e23ad56b8974002d61f117e171c967e1fe74ffa458bed810e6c7526cd8c93
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:^2.0.5, lilconfig@npm:^2.1.0":
   version: 2.1.0
   resolution: "lilconfig@npm:2.1.0"
@@ -28989,6 +29262,7 @@ __metadata:
     "@react-types/shared": "npm:^3.27.0"
     "@react-types/table": "npm:^3.10.4"
     "@swc/helpers": "npm:^0.5.0"
+    "@tailwindcss/postcss": "npm:^4.0.0"
     client-only: "npm:^0.0.1"
     react-aria: "npm:^3.37.0"
     react-stately: "npm:^3.35.0"
@@ -29369,7 +29643,7 @@ __metadata:
     storybook-dark-mode: "npm:^3.0.3"
     storybook-react-parcel: "npm:^0.0.1"
     tailwind-variants: "npm:^0.1.18"
-    tailwindcss: "npm:^3.4.0"
+    tailwindcss: "npm:^4.0.0"
     tailwindcss-animate: "npm:^1.0.7"
     tempy: "npm:^0.5.0"
     typescript: "npm:^5.5.0"
@@ -32340,7 +32614,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"tailwindcss@npm:^3.2.2, tailwindcss@npm:^3.4.0":
+"tailwindcss@npm:4.0.0, tailwindcss@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "tailwindcss@npm:4.0.0"
+  checksum: 10c0/418b1cb02c46f5064bdd4931d8bb030e5c2a986744226dc282b47ecd4b95d1eb919a6f35a68cac948fbf3224fd976feafd9476e289cb5774062f6a3b2a49606e
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:^3.2.2":
   version: 3.4.0
   resolution: "tailwindcss@npm:3.4.0"
   dependencies:
@@ -32373,6 +32654,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tapable@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "tapable@npm:2.2.1"
+  checksum: 10c0/bc40e6efe1e554d075469cedaba69a30eeb373552aaf41caeaaa45bf56ffacc2674261b106245bd566b35d8f3329b52d838e851ee0a852120acae26e622925c9
+  languageName: node
+  linkType: hard
+
 "tar-fs@npm:^2.1.1":
   version: 2.1.1
   resolution: "tar-fs@npm:2.1.1"

From a980dd78ae6df9f724e3f4baa2742c3d82367757 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 16:43:25 -0500
Subject: [PATCH 02/17] Update plugin, homepage, and examples

---
 examples/rac-tailwind/src/App.js              |   6 +-
 .../dev/docs/pages/react-aria/home.global.css |  42 +-
 .../docs/pages/react-aria/home/ExampleApp.tsx |   2 +-
 .../dev/docs/pages/react-aria/home/I18n.tsx   |   2 +-
 .../dev/docs/pages/react-aria/home/Styles.tsx |   2 +-
 .../pages/react-aria/home/SwitchAnimation.tsx |   2 +-
 .../docs/pages/react-aria/tailwind.config.js  |  29 -
 .../docs/examples/account-menu.mdx            |  21 +-
 .../docs/examples/action-menu.mdx             |  23 +-
 .../docs/examples/category-tabs.mdx           |  18 +-
 .../docs/examples/contact-list.mdx            |  18 +-
 .../docs/examples/datepicker.mdx              |  19 +-
 .../docs/examples/destructive-dialog.mdx      |  21 +-
 .../docs/examples/framer-modal-sheet.mdx      |  18 +-
 .../docs/examples/image-grid.mdx              |  18 +-
 .../docs/examples/ios-list.mdx                |  18 +-
 .../docs/examples/loading-progress.mdx        |  20 +-
 .../docs/examples/notifications-popover.mdx   |  21 +-
 .../docs/examples/opacity-slider.mdx          |  18 +-
 .../docs/examples/ripple-button.mdx           |  22 +-
 .../docs/examples/shipping-radio.mdx          |  18 +-
 .../docs/examples/status-select.mdx           |  21 +-
 .../docs/examples/stock-table.mdx             |  18 +-
 .../docs/examples/swipeable-tabs.mdx          |  18 +-
 .../docs/examples/tailwind.global.css         |  10 +-
 .../docs/examples/user-combobox.mdx           |  21 +-
 .../docs/examples/wifi-switch.mdx             |  18 +-
 .../fixtures/prefix.html                      |   1 +
 .../fixtures/variants.html                    |   1 +
 .../package.json                              |   5 +-
 .../src/index.js                              |  40 +-
 .../src/index.test.js                         | 554 ----------------
 .../test/__snapshots__/index.test.js.snap     | 615 ++++++++++++++++++
 .../test/index.test.js                        |  46 ++
 starters/tailwind/src/Calendar.tsx            |   2 +-
 starters/tailwind/src/ListBox.tsx             |   2 +-
 starters/tailwind/src/Menu.tsx                |   2 +-
 starters/tailwind/src/Table.tsx               |   6 +-
 yarn.lock                                     | 201 +-----
 39 files changed, 1074 insertions(+), 865 deletions(-)
 delete mode 100644 packages/dev/docs/pages/react-aria/tailwind.config.js
 create mode 100644 packages/tailwindcss-react-aria-components/fixtures/prefix.html
 create mode 100644 packages/tailwindcss-react-aria-components/fixtures/variants.html
 delete mode 100644 packages/tailwindcss-react-aria-components/src/index.test.js
 create mode 100644 packages/tailwindcss-react-aria-components/test/__snapshots__/index.test.js.snap
 create mode 100644 packages/tailwindcss-react-aria-components/test/index.test.js

diff --git a/examples/rac-tailwind/src/App.js b/examples/rac-tailwind/src/App.js
index a86b5ff0713..f0482c482c8 100644
--- a/examples/rac-tailwind/src/App.js
+++ b/examples/rac-tailwind/src/App.js
@@ -40,7 +40,7 @@ function MenuExample() {
     <div className="bg-linear-to-r to-blue-500 from-violet-500 p-8 rounded-lg">
       <MenuTrigger>
         <OverlayButton aria-label="Menu">☰</OverlayButton>
-        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 data-entering:animate-in data-entering:fade-in data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out data-exiting:zoom-out-95 fill-mode-forwards origin-top-left">
+        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black/5 data-entering:animate-in data-entering:fade-in data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out data-exiting:zoom-out-95 fill-mode-forwards origin-top-left">
           <Menu className="outline-hidden">
             <MyMenuItem id="new">New…</MyMenuItem>
             <MyMenuItem id="open">Open…</MyMenuItem>
@@ -78,7 +78,7 @@ function SelectExample() {
             className="h-5 w-5 text-gray-500"
             aria-hidden="true" />
         </Button>
-        <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 sm:text-sm data-entering:animate-in data-entering:fade-in data-exiting:animate-out data-exiting:fade-out fill-mode-forwards">
+        <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 sm:text-sm data-entering:animate-in data-entering:fade-in data-exiting:animate-out data-exiting:fade-out fill-mode-forwards">
           <ListBox className="outline-hidden p-1 [--focus-bg:var(--color-rose-600)]">
             <MyListBoxItem>Aardvark</MyListBoxItem>
             <MyListBoxItem>Cat</MyListBoxItem>
@@ -128,7 +128,7 @@ function ComboBoxExample() {
               aria-hidden="true" />
           </Button>
         </div>
-        <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 sm:text-sm data-exiting:animate-out data-exiting:fade-out fill-mode-forwards duration-100 ease-in">
+        <Popover className="max-h-60 w-(--trigger-width) overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black/5 sm:text-sm data-exiting:animate-out data-exiting:fade-out fill-mode-forwards duration-100 ease-in">
           <ListBox className="outline-hidden p-1 [--focus-bg:var(--color-sky-600)]">
             <MyListBoxItem>Aardvark</MyListBoxItem>
             <MyListBoxItem>Cat</MyListBoxItem>
diff --git a/packages/dev/docs/pages/react-aria/home.global.css b/packages/dev/docs/pages/react-aria/home.global.css
index 1f90bab4019..a8c59e43e14 100644
--- a/packages/dev/docs/pages/react-aria/home.global.css
+++ b/packages/dev/docs/pages/react-aria/home.global.css
@@ -9,9 +9,12 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-@import 'tailwindcss';
-
-@config "./tailwind.config.js";
+@import 'tailwindcss' source(none);
+@source "*.mdx";
+@source "home/*.tsx";
+@source "../../../../../starters/tailwind/**/*.{ts,tsx}";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
 
 @utility focus-ring {
   @apply outline outline-0 outline-blue-600 dark:outline-blue-500 focus-visible:outline-2;
@@ -111,7 +114,7 @@ main > section > h2 {
   --hljs-color: theme(colors.gray.800);
   --hljs-background: transparent;
   --hljs-keyword-color: theme(colors.fuchsia.700);
-  --hljs-section-color: lch(from theme(colors.red.600) calc(l - 2%) c h);
+  --hljs-section-color: theme(colors.red.600);
   --hljs-string-color: theme(colors.green.700);
   --hljs-literal-color: theme(colors.purple.700);
   --hljs-attribute-color: theme(colors.indigo.700);
@@ -243,43 +246,52 @@ pre.small {
   }
 }
 
-/* @keyframes switch-animation {
+@keyframes switch-animation {
   0%, 16% {
-    @apply ml-6 w-8;
+    margin-left: --spacing(6);
+    width: --spacing(8);
   }
 
   18.5%, 22% {
-    @apply ml-4 w-10;
+    margin-left: --spacing(4);
+    width: --spacing(10);
   }
 
   25%, 30% {
-    @apply ml-6 w-8;
+    margin-left: --spacing(6);
+    width: --spacing(8);
   }
 
   33%, 36.5% {
-    @apply ml-4 w-10;
+    margin-left: --spacing(4);
+    width: --spacing(10);
   }
 
   38.5%, 66% {
-    @apply ml-0 w-8;
+    margin-left: 0;
+    width: --spacing(8);
   }
 
   68.5%, 72% {
-    @apply ml-0 w-10;
+    margin-left: 0;
+    width: --spacing(10);
   }
 
   75%, 80% {
-    @apply ml-0 w-8;
+    margin-left: 0;
+    width: --spacing(8);
   }
 
   83%, 86.5% {
-    @apply ml-0 w-10;
+    margin-left: 0;
+    width: --spacing(10);
   }
 
   88.5%, 100% {
-    @apply ml-6 w-8;
+    margin-left: --spacing(6);
+    width: --spacing(8);
   }
-} */
+}
 
 @keyframes switch-background-animation {
   0%, 36.5% {
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index df548eee7f9..0ecd739b676 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -262,7 +262,7 @@ export function ExampleApp() {
           )}
         </GridList>
       }
-      {!isSmall && <ResizableTableContainer className="flex-1 w-full overflow-auto scroll-pt-[2.281rem] relative border dark:border-zinc-700 rounded-lg" onScroll={onScroll}>
+      {!isSmall && <ResizableTableContainer className="flex-1 w-full overflow-auto scroll-pt-[2.281rem] relative border border-gray-200 dark:border-zinc-700 rounded-lg" onScroll={onScroll}>
         <Table aria-label="My plants" selectionMode="multiple" sortDescriptor={sortDescriptor} onSortChange={setSortDescriptor}>
           <TableHeader columns={columns}>
             {column => <Column {...column} />}
diff --git a/packages/dev/docs/pages/react-aria/home/I18n.tsx b/packages/dev/docs/pages/react-aria/home/I18n.tsx
index 8e7e291be11..c854bcfc031 100644
--- a/packages/dev/docs/pages/react-aria/home/I18n.tsx
+++ b/packages/dev/docs/pages/react-aria/home/I18n.tsx
@@ -171,7 +171,7 @@ export function I18n() {
 
   return (
     <div className="grid items-center justify-items-center py-10 px-0 md:p-10 lg:p-0 gap-10 lg:gap-0 lg:grid-cols-[auto_1fr_1fr] mt-10 card-shadow rounded-2xl bg-white dark:bg-zinc-800/90 overflow-hidden">
-      <div className="grid md:grid-cols-2 lg:grid-cols-1 flex-col gap-4 lg:p-10 lg:mr-10 lg:border-r dark:border-r-zinc-300/10">
+      <div className="grid md:grid-cols-2 lg:grid-cols-1 flex-col gap-4 lg:p-10 lg:mr-10 lg:border-r border-r-gray-200 dark:border-r-zinc-300/10">
         <Select label="Locale" items={locales} selectedKey={locale} onSelectionChange={updateLocale}>
           {item => <SelectItem id={item.value}>{item.label}</SelectItem>}
         </Select>
diff --git a/packages/dev/docs/pages/react-aria/home/Styles.tsx b/packages/dev/docs/pages/react-aria/home/Styles.tsx
index c0e21d036e8..cc13b9ffec7 100644
--- a/packages/dev/docs/pages/react-aria/home/Styles.tsx
+++ b/packages/dev/docs/pages/react-aria/home/Styles.tsx
@@ -49,7 +49,7 @@ export function Styles() {
                 <div className="flex flex-row px-3 lg:hidden bg-gray-200/80 backdrop-blur-md dark:bg-zinc-700/80 border-y border-gray-300 dark:border-zinc-700">
                   <FileTab>DatePicker.css</FileTab>
                 </div>
-                <Scrollable className="rounded-br-lg lg:border-l dark:border-l-zinc-600">
+                <Scrollable className="rounded-br-lg lg:border-l lg:border-l-gray-200 dark:border-l-zinc-600">
                   <div className="contents" dangerouslySetInnerHTML={{__html: document.getElementById('css')!.innerHTML}} />
                 </Scrollable>
               </div>
diff --git a/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx b/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
index 0d10a8c0539..661e6f6fb88 100644
--- a/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
+++ b/packages/dev/docs/pages/react-aria/home/SwitchAnimation.tsx
@@ -56,7 +56,7 @@ export function SwitchAnimation() {
         isSelected={isSelected}
         onChange={isAnimating ? undefined : setSelected}
         className="group inline-flex touch-none">
-        <span className="[--bg:var(--color-slate-300)] dark:[--bg:var(--color-zinc-600)] forced-colors:[--bg:ButtonFace]! bg-(--bg) [--bg-selected:var(--color-green-500)] forced-colors:[--bg-selected:Highlight]! group-selected:bg-(--bg-selected) group-focus-visible:outline outline-2 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 mr-4 h-10 w-16 rounded-full border border-black/[5%] dark:border-white/10 p-[3px] transition duration-200" style={{animation: isAnimating ? 'switch-background-animation 12s ease-in-out 500ms' : undefined}}>
+        <span className="[--bg:var(--color-slate-300)] dark:[--bg:var(--color-zinc-600)] forced-colors:[--bg:ButtonFace]! bg-(--bg) [--bg-selected:var(--color-green-500)] forced-colors:[--bg-selected:Highlight]! group-selected:bg-(--bg-selected) group-focus-visible:outline-2 outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2 mr-4 h-10 w-16 rounded-full border border-black/[5%] dark:border-white/10 p-[3px] transition duration-200" style={{animation: isAnimating ? 'switch-background-animation 12s ease-in-out 500ms' : undefined}}>
           <span className="group-selected:ml-6 group-selected:group-pressed:ml-4 group-pressed:w-10 block h-8 w-8 origin-right rounded-full bg-white forced-colors:bg-[ButtonText] forced-colors:group-selected:bg-[HighlightText] border border-transparent shadow-sm transition-all duration-200" style={{animation: isAnimating ? 'switch-animation 12s ease-in-out 500ms' : undefined, contain: 'layout'}} />
         </span>
       </Switch>
diff --git a/packages/dev/docs/pages/react-aria/tailwind.config.js b/packages/dev/docs/pages/react-aria/tailwind.config.js
deleted file mode 100644
index cde4b3b7b8e..00000000000
--- a/packages/dev/docs/pages/react-aria/tailwind.config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: {
-    relative: true,
-    files: ['*.mdx', 'home/*.tsx', '../../../../../starters/tailwind/**/*.{ts,tsx}']
-  },
-  theme: {
-    extend: {}
-  },
-  future: {
-    hoverOnlyWhenSupported: true
-  },
-  plugins: [
-    require('tailwindcss-react-aria-components'),
-    require('tailwindcss-animate')
-  ]
-};
diff --git a/packages/react-aria-components/docs/examples/account-menu.mdx b/packages/react-aria-components/docs/examples/account-menu.mdx
index d3b61d44d3d..7bb50c7ef1f 100644
--- a/packages/react-aria-components/docs/examples/account-menu.mdx
+++ b/packages/react-aria-components/docs/examples/account-menu.mdx
@@ -17,6 +17,7 @@ import Dialog from '@react-spectrum/docs/pages/assets/component-illustrations/Di
 import Menu from '@react-spectrum/docs/pages/assets/component-illustrations/Menu.svg';
 import Button from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, menu, popover, dialog, aria, accessibility, react, component]
@@ -48,7 +49,7 @@ function AccountMenuExample() {
         <Button aria-label="Account" className="inline-flex items-center justify-center rounded-md p-1.5 text-white bg-transparent border-none hover:bg-gray-200 pressed:bg-gray-300 dark:hover:bg-zinc-800 dark:pressed:bg-zinc-700 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-blue-600">
           <img alt="" src="https://i.imgur.com/xIe7Wlb.png" className="w-7 h-7 rounded-full" />
         </Button>
-        <Popover placement="bottom end" className="p-2 overflow-auto rounded-lg bg-white dark:bg-zinc-950 shadow-lg ring-1 ring-black dark:ring-white ring-opacity-10 dark:ring-opacity-15 entering:animate-in entering:fade-in entering:placement-bottom:slide-in-from-top-1 entering:placement-top:slide-in-from-bottom-1 exiting:animate-out exiting:fade-out exiting:placement-bottom:slide-out-to-top-1 exiting:placement-top:slide-out-to-bottom-1 fill-mode-forwards origin-top-left">
+        <Popover placement="bottom end" className="p-2 overflow-auto rounded-lg bg-white dark:bg-zinc-950 shadow-lg ring-1 ring-black/10 dark:ring-white/15 entering:animate-in entering:fade-in entering:placement-bottom:slide-in-from-top-1 entering:placement-top:slide-in-from-bottom-1 exiting:animate-out exiting:fade-out exiting:placement-bottom:slide-out-to-top-1 exiting:placement-top:slide-out-to-bottom-1 fill-mode-forwards origin-top-left">
           <Dialog className="outline-hidden">
             <div className="flex gap-2 items-center mx-3 mt-2">
               <img alt="" src="https://i.imgur.com/xIe7Wlb.png" className="w-16 h-16 rounded-full" />
@@ -100,7 +101,19 @@ This example uses the following plugins:
 * [tailwindcss-react-aria-components](../styling.html#plugin)
 * [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
 
-Add them to your `tailwind.config.js`:
+When using Tailwind v4, add them to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugins to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -112,6 +125,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/action-menu.mdx b/packages/react-aria-components/docs/examples/action-menu.mdx
index f24a1eb3372..bf42dff4b7f 100644
--- a/packages/react-aria-components/docs/examples/action-menu.mdx
+++ b/packages/react-aria-components/docs/examples/action-menu.mdx
@@ -17,6 +17,7 @@ import Popover from '@react-spectrum/docs/pages/assets/component-illustrations/P
 import Menu from '@react-spectrum/docs/pages/assets/component-illustrations/Menu.svg';
 import Button from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, menu, aria, accessibility, react, component]
@@ -44,8 +45,8 @@ function MenuExample() {
   return (
     <div className="bg-linear-to-r to-blue-500 from-violet-500 p-8 h-[250px] rounded-lg">
       <MenuTrigger>
-        <Button aria-label="Menu" className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"><RailIcon size="S" /></Button>
-        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards origin-top-left">
+        <Button aria-label="Menu" className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3 py-2 text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"><RailIcon size="S" /></Button>
+        <Popover className="p-1 w-56 overflow-auto rounded-md bg-white shadow-lg ring-1 ring-black/5 entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 fill-mode-forwards origin-top-left">
           <Menu className="outline-hidden">
             <ActionItem id="new">New…</ActionItem>
             <ActionItem id="open">Open…</ActionItem>
@@ -73,7 +74,19 @@ This example uses the following plugins:
 * [tailwindcss-react-aria-components](../styling.html#plugin)
 * [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
 
-Add them to your `tailwind.config.js`:
+When using Tailwind v4, add them to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugins to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -85,6 +98,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/category-tabs.mdx b/packages/react-aria-components/docs/examples/category-tabs.mdx
index e8bc3207af1..015d6049511 100644
--- a/packages/react-aria-components/docs/examples/category-tabs.mdx
+++ b/packages/react-aria-components/docs/examples/category-tabs.mdx
@@ -16,6 +16,7 @@ import styles from '@react-spectrum/docs/src/docs.css';
 import Tabs from '@react-spectrum/docs/pages/assets/component-illustrations/Tabs.svg';
 import Link from '@react-spectrum/docs/pages/assets/component-illustrations/Link.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, tabs, aria, accessibility, react, component]
@@ -106,7 +107,18 @@ function Article({title, summary}: {title: string, summary: string}) {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -117,6 +129,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/contact-list.mdx b/packages/react-aria-components/docs/examples/contact-list.mdx
index a63a0817312..92b2fb79657 100644
--- a/packages/react-aria-components/docs/examples/contact-list.mdx
+++ b/packages/react-aria-components/docs/examples/contact-list.mdx
@@ -15,6 +15,7 @@ import {TypeLink} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import ListBox from '@react-spectrum/docs/pages/assets/component-illustrations/ListBox.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, listbox, aria, accessibility, react, component]
@@ -149,7 +150,18 @@ function Contact({item}) {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -160,6 +172,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/datepicker.mdx b/packages/react-aria-components/docs/examples/datepicker.mdx
index 6cc4a7c3461..ce3d54778a2 100644
--- a/packages/react-aria-components/docs/examples/datepicker.mdx
+++ b/packages/react-aria-components/docs/examples/datepicker.mdx
@@ -21,6 +21,7 @@ import DateField from '@react-spectrum/docs/pages/assets/component-illustrations
 import Calendar from '@react-spectrum/docs/pages/assets/component-illustrations/Calendar.svg';
 import Dialog from '@react-spectrum/docs/pages/assets/component-illustrations/Dialog.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, datepicker, aria, accessibility, react, component]
@@ -107,7 +108,19 @@ This example uses the following plugins:
 * [tailwindcss-react-aria-components](../styling.html#plugin)
 * [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
 
-Add them to your `tailwind.config.js`:
+When using Tailwind v4, add them to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugins to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -119,6 +132,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/destructive-dialog.mdx b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
index 96c89043384..5db38972291 100644
--- a/packages/react-aria-components/docs/examples/destructive-dialog.mdx
+++ b/packages/react-aria-components/docs/examples/destructive-dialog.mdx
@@ -17,6 +17,7 @@ import Button from '@react-spectrum/docs/pages/assets/component-illustrations/Ac
 import Dialog from '@react-spectrum/docs/pages/assets/component-illustrations/Dialog.svg';
 import Link from '@react-spectrum/docs/pages/assets/component-illustrations/Link.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, modal, dialog, aria, accessibility, react, component]
@@ -43,7 +44,7 @@ function ModalExample() {
   return (
     <div className="bg-linear-to-r from-sky-400 to-indigo-500 p-12 rounded-lg flex justify-center">
       <DialogTrigger>
-        <Button className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75">Delete…</Button>
+        <Button className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75">Delete…</Button>
         <ModalOverlay className={({isEntering, isExiting}) => `
           fixed inset-0 z-10 overflow-y-auto bg-black/25 flex min-h-full items-center justify-center p-4 text-center backdrop-blur
           ${isEntering ? 'animate-in fade-in duration-300 ease-out' : ''}
@@ -94,7 +95,19 @@ This example uses the following plugins:
 * [tailwindcss-react-aria-components](../styling.html#plugin)
 * [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
 
-Add them to your `tailwind.config.js`:
+When using Tailwind v4, add them to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugins to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -106,6 +119,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx b/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx
index b15301951fc..384eaf44324 100644
--- a/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx
+++ b/packages/react-aria-components/docs/examples/framer-modal-sheet.mdx
@@ -16,6 +16,7 @@ import styles from '@react-spectrum/docs/src/docs.css';
 import Dialog from '@react-spectrum/docs/pages/assets/component-illustrations/Dialog.svg';
 import Button from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, modal, dialog, aria, accessibility, react, component]
@@ -175,7 +176,18 @@ function Sheet() {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -186,6 +198,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/image-grid.mdx b/packages/react-aria-components/docs/examples/image-grid.mdx
index 2126b99d14c..7e5084eddcf 100644
--- a/packages/react-aria-components/docs/examples/image-grid.mdx
+++ b/packages/react-aria-components/docs/examples/image-grid.mdx
@@ -16,6 +16,7 @@ import styles from '@react-spectrum/docs/src/docs.css';
 import ListBox from '@react-spectrum/docs/pages/assets/component-illustrations/ListBox.svg';
 import ProgressCircle from '@react-spectrum/docs/pages/assets/component-illustrations/ProgressCircle.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, listbox, aria, accessibility, react, component]
@@ -95,7 +96,18 @@ function ProgressCircle() {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -106,6 +118,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/ios-list.mdx b/packages/react-aria-components/docs/examples/ios-list.mdx
index 047e48369e3..61f8b6e19a1 100644
--- a/packages/react-aria-components/docs/examples/ios-list.mdx
+++ b/packages/react-aria-components/docs/examples/ios-list.mdx
@@ -16,6 +16,7 @@ import styles from '@react-spectrum/docs/src/docs.css';
 import Button from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg';
 import ListView from '@react-spectrum/docs/pages/assets/component-illustrations/ListView.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, gridlist, aria, accessibility, react, component]
@@ -339,7 +340,18 @@ function SelectionCheckmark({ isSelected }) {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -350,6 +362,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/loading-progress.mdx b/packages/react-aria-components/docs/examples/loading-progress.mdx
index e275f58549e..4ae19cf4e3a 100644
--- a/packages/react-aria-components/docs/examples/loading-progress.mdx
+++ b/packages/react-aria-components/docs/examples/loading-progress.mdx
@@ -15,6 +15,7 @@ import {TypeLink} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import ProgressBar from '@react-spectrum/docs/pages/assets/component-illustrations/ProgressBar.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, progressbar, aria, accessibility, react, component]
@@ -43,7 +44,7 @@ import {ProgressBar, Label} from 'react-aria-components';
         <Label className="flex-1">Loading…</Label>
         <span>{valueText}</span>
       </div>
-      <div className="h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white bg-opacity-40">
+      <div className="h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white/40">
         <div className="absolute h-2 top-[50%] transform translate-y-[-50%] rounded-full bg-white" style={{width: percentage + '%'}} />
       </div>
     </>}
@@ -53,7 +54,18 @@ import {ProgressBar, Label} from 'react-aria-components';
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -64,6 +76,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/notifications-popover.mdx b/packages/react-aria-components/docs/examples/notifications-popover.mdx
index 27ffb1cb659..ffe7c2dc8cf 100644
--- a/packages/react-aria-components/docs/examples/notifications-popover.mdx
+++ b/packages/react-aria-components/docs/examples/notifications-popover.mdx
@@ -18,6 +18,7 @@ import Button from '@react-spectrum/docs/pages/assets/component-illustrations/Ac
 import Dialog from '@react-spectrum/docs/pages/assets/component-illustrations/Dialog.svg';
 import Link from '@react-spectrum/docs/pages/assets/component-illustrations/Link.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, popover, dialog, aria, accessibility, react, component]
@@ -46,7 +47,7 @@ function PopoverExample() {
   return (
     <div className="bg-linear-to-r from-orange-400 to-pink-600 p-8 rounded-lg sm:h-[300px] flex items-start justify-center">
       <DialogTrigger>
-        <Button aria-label="Notifications" className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium text-white hover:bg-opacity-30 pressed:bg-opacity-40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75">
+        <Button aria-label="Notifications" className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75">
           <BellIcon size="S" />
         </Button>
         <MyPopover>
@@ -100,7 +101,19 @@ This example uses the following plugins:
 * [tailwindcss-react-aria-components](../styling.html#plugin)
 * [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
 
-Add them to your `tailwind.config.js`:
+When using Tailwind v4, add them to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugins to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -112,6 +125,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/opacity-slider.mdx b/packages/react-aria-components/docs/examples/opacity-slider.mdx
index 8e964e31126..e9371da8a10 100644
--- a/packages/react-aria-components/docs/examples/opacity-slider.mdx
+++ b/packages/react-aria-components/docs/examples/opacity-slider.mdx
@@ -15,6 +15,7 @@ import {TypeLink} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import Slider from '@react-spectrum/docs/pages/assets/component-illustrations/Slider.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, slider, aria, accessibility, react, component]
@@ -57,7 +58,18 @@ import {Slider, Label, SliderOutput, SliderTrack, SliderThumb} from 'react-aria-
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -68,6 +80,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/ripple-button.mdx b/packages/react-aria-components/docs/examples/ripple-button.mdx
index 3eb23927a0c..4b9633676b3 100644
--- a/packages/react-aria-components/docs/examples/ripple-button.mdx
+++ b/packages/react-aria-components/docs/examples/ripple-button.mdx
@@ -15,6 +15,7 @@ import {TypeLink} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import Button from '@react-spectrum/docs/pages/assets/component-illustrations/Button.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, button, aria, accessibility, react, component]
@@ -62,8 +63,8 @@ function RippleButton(props) {
         onPress={onPress}
         className={`
       relative overflow-hidden
-      inline-flex items-center justify-center rounded-md bg-black bg-opacity-50 bg-clip-padding border border-white/20 px-6 py-4 text-white text-lg
-      hover:bg-opacity-60 pressed:bg-opacity-70 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75`}>
+      inline-flex items-center justify-center rounded-md bg-black/50 bg-clip-padding border border-white/20 px-6 py-4 text-white text-lg
+      hover:bg-black/60 pressed:bg-black/70 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75`}>
       {coords && (
         <div
           key={`${coords.x},${coords.y}`}
@@ -96,7 +97,18 @@ function RippleButton(props) {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -107,6 +119,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/shipping-radio.mdx b/packages/react-aria-components/docs/examples/shipping-radio.mdx
index 95bd11ec759..a1fca18e910 100644
--- a/packages/react-aria-components/docs/examples/shipping-radio.mdx
+++ b/packages/react-aria-components/docs/examples/shipping-radio.mdx
@@ -15,6 +15,7 @@ import {TypeLink} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
 import RadioGroup from '@react-spectrum/docs/pages/assets/component-illustrations/RadioGroup.svg';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, radio, aria, accessibility, react, component]
@@ -78,7 +79,18 @@ function ShippingOption({name, time, price}) {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -89,6 +101,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/status-select.mdx b/packages/react-aria-components/docs/examples/status-select.mdx
index c67a61f7da9..8bef84eaaf2 100644
--- a/packages/react-aria-components/docs/examples/status-select.mdx
+++ b/packages/react-aria-components/docs/examples/status-select.mdx
@@ -18,6 +18,7 @@ import Button from '@react-spectrum/docs/pages/assets/component-illustrations/Ac
 import Popover from '@react-spectrum/docs/pages/assets/component-illustrations/Popover.svg';
 import ListBox from '@react-spectrum/docs/pages/assets/component-illustrations/ListBox.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, select, aria, accessibility, react, component]
@@ -47,7 +48,7 @@ function SelectExample() {
     <div className="bg-linear-to-tl from-amber-500 to-rose-700 p-8 sm:h-[250px] rounded-lg flex justify-center">
       <Select className="flex flex-col gap-1 w-[200px]">
         <Label className="text-white cursor-default">Status</Label>
-        <Button className="flex items-center cursor-default rounded-lg border-0 bg-white bg-opacity-90 pressed:bg-opacity-100 transition py-2 pl-5 pr-2 text-base text-left leading-normal shadow-md text-gray-700 focus:outline-hidden focus-visible:ring-2 ring-white ring-offset-2 ring-offset-rose-700">
+        <Button className="flex items-center cursor-default rounded-lg border-0 bg-white/90 pressed:bg-white transition py-2 pl-5 pr-2 text-base text-left leading-normal shadow-md text-gray-700 focus:outline-hidden focus-visible:ring-2 ring-white ring-offset-2 ring-offset-rose-700">
           <SelectValue className="flex-1 truncate placeholder-shown:italic" />
           <ChevronUpDownIcon size="XS" />
         </Button>
@@ -109,7 +110,19 @@ This example uses the following plugins:
 * [tailwindcss-react-aria-components](../styling.html#plugin)
 * [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
 
-Add them to your `tailwind.config.js`:
+When using Tailwind v4, add them to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugins to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -121,6 +134,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/stock-table.mdx b/packages/react-aria-components/docs/examples/stock-table.mdx
index 2b28455adf5..46f9203b420 100644
--- a/packages/react-aria-components/docs/examples/stock-table.mdx
+++ b/packages/react-aria-components/docs/examples/stock-table.mdx
@@ -15,6 +15,7 @@ import {TypeLink} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import Table from '@react-spectrum/docs/pages/assets/component-illustrations/Table.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, table, aria, accessibility, react, component]
@@ -163,7 +164,18 @@ function StockCell(props: CellProps) {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -174,6 +186,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/swipeable-tabs.mdx b/packages/react-aria-components/docs/examples/swipeable-tabs.mdx
index 6d0763d5e2b..6eeded767d8 100644
--- a/packages/react-aria-components/docs/examples/swipeable-tabs.mdx
+++ b/packages/react-aria-components/docs/examples/swipeable-tabs.mdx
@@ -15,6 +15,7 @@ import {TypeLink} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import Tabs from '@react-spectrum/docs/pages/assets/component-illustrations/Tabs.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, tabs, aria, accessibility, react, component]
@@ -209,7 +210,18 @@ function AnimatedTabs() {
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -220,6 +232,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/tailwind.global.css b/packages/react-aria-components/docs/examples/tailwind.global.css
index 5addcc63195..d900ee639da 100644
--- a/packages/react-aria-components/docs/examples/tailwind.global.css
+++ b/packages/react-aria-components/docs/examples/tailwind.global.css
@@ -1,3 +1,7 @@
-@import 'tailwindcss';
-
-/* @config "./tailwind.config.js"; */
+/* Individual imports to omit preflight CSS reset */
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities) source(none);
+@source "*.mdx";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+@variant dark (&:where([style*="color-scheme: dark"] *));
diff --git a/packages/react-aria-components/docs/examples/user-combobox.mdx b/packages/react-aria-components/docs/examples/user-combobox.mdx
index 5a84ddf9e28..6c074ec2689 100644
--- a/packages/react-aria-components/docs/examples/user-combobox.mdx
+++ b/packages/react-aria-components/docs/examples/user-combobox.mdx
@@ -18,6 +18,7 @@ import Button from '@react-spectrum/docs/pages/assets/component-illustrations/Ac
 import Popover from '@react-spectrum/docs/pages/assets/component-illustrations/Popover.svg';
 import ListBox from '@react-spectrum/docs/pages/assets/component-illustrations/ListBox.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, combobox, aria, accessibility, react, component]
@@ -99,7 +100,7 @@ function ComboBoxExample() {
     <div className="bg-linear-to-r from-sky-300 to-cyan-300 p-8 sm:h-[300px] rounded-lg flex justify-center">
       <ComboBox className="group flex flex-col gap-1 w-[200px]">
         <Label className="text-black cursor-default">Assignee</Label>
-        <Group className="flex rounded-lg bg-white bg-opacity-90 focus-within:bg-opacity-100 transition shadow-md ring-1 ring-black/10 focus-visible:ring-2 focus-visible:ring-black">
+        <Group className="flex rounded-lg bg-white/90 focus-within:bg-white transition shadow-md ring-1 ring-black/10 focus-visible:ring-2 focus-visible:ring-black">
           <Input className="flex-1 w-full border-none py-2 px-3 leading-5 text-gray-900 bg-transparent outline-hidden text-base" />
           <Button className="px-3 flex items-center text-gray-700 transition border-0 border-solid border-l border-l-sky-200 bg-transparent rounded-r-lg pressed:bg-sky-100">
             <ChevronUpDownIcon size="XS" />
@@ -147,7 +148,19 @@ This example uses the following plugins:
 * [tailwindcss-react-aria-components](../styling.html#plugin)
 * [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
 
-Add them to your `tailwind.config.js`:
+When using Tailwind v4, add them to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugins to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -159,6 +172,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/react-aria-components/docs/examples/wifi-switch.mdx b/packages/react-aria-components/docs/examples/wifi-switch.mdx
index 92d86dd737e..841364a43ec 100644
--- a/packages/react-aria-components/docs/examples/wifi-switch.mdx
+++ b/packages/react-aria-components/docs/examples/wifi-switch.mdx
@@ -15,6 +15,7 @@ import {TypeLink} from '@react-spectrum/docs';
 import styles from '@react-spectrum/docs/src/docs.css';
 import Switch from '@react-spectrum/docs/pages/assets/component-illustrations/Switch.svg';
 import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
 
 ---
 keywords: [example, switch, aria, accessibility, react, component]
@@ -48,7 +49,18 @@ import {Switch} from 'react-aria-components';
 
 ### Tailwind config
 
-This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. Add it to your `tailwind.config.js`:
+This example uses the [tailwindcss-react-aria-components](../styling.html#plugin) plugin. When using Tailwind v4, add it to your CSS:
+
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, add the plugin to your `tailwind.config.js` instead:
 
 ```tsx
 module.exports = {
@@ -59,6 +71,10 @@ module.exports = {
 };
 ```
 
+**Note**: When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x.
+
+</details>
+
 ## Components
 
 <section className={styles.cardGroup} data-size="small">
diff --git a/packages/tailwindcss-react-aria-components/fixtures/prefix.html b/packages/tailwindcss-react-aria-components/fixtures/prefix.html
new file mode 100644
index 00000000000..7964291763a
--- /dev/null
+++ b/packages/tailwindcss-react-aria-components/fixtures/prefix.html
@@ -0,0 +1 @@
+<div data-rac className="rac-hover:bg-red rac-focus:bg-red rac-focus-visible:bg-red rac-focus-within:bg-red rac-pressed:bg-red rac-disabled:bg-red rac-pending:bg-red rac-drop-target:bg-red rac-dragging:bg-red rac-empty:bg-red rac-allows-dragging:bg-red rac-allows-removing:bg-red rac-allows-sorting:bg-red rac-has-submenu:bg-red rac-placeholder-shown:bg-red rac-selected:bg-red rac-indeterminate:bg-red rac-read-only:bg-red rac-required:bg-red rac-entering:bg-red rac-exiting:bg-red rac-open:bg-red rac-expanded:bg-red rac-unavailable:bg-red rac-outside-month:bg-red rac-outside-visible-range:bg-red rac-selection-start:bg-red rac-selection-end:bg-red rac-current:bg-red rac-invalid:bg-red rac-resizing:bg-red rac-placement-left:bg-red rac-placement-right:bg-red rac-placement-top:bg-red rac-placement-bottom:bg-red rac-type-literal:bg-red rac-type-year:bg-red rac-type-month:bg-red rac-type-day:bg-red rac-layout-grid:bg-red rac-layout-stack:bg-red rac-orientation-horizontal:bg-red rac-orientation-vertical:bg-red rac-selection-single:bg-red rac-selection-multiple:bg-red rac-resizable-right:bg-red rac-resizable-left:bg-red rac-resizable-both:bg-red rac-sort-ascending:bg-red rac-sort-descending:bg-red group-rac-pressed:bg-red group/custom-name group-rac-hover/custom-name:bg-red peer-rac-pressed:bg-red peer-rac-pressed/custom-name:bg-red"></div>
diff --git a/packages/tailwindcss-react-aria-components/fixtures/variants.html b/packages/tailwindcss-react-aria-components/fixtures/variants.html
new file mode 100644
index 00000000000..96494895c3b
--- /dev/null
+++ b/packages/tailwindcss-react-aria-components/fixtures/variants.html
@@ -0,0 +1 @@
+<div data-rac className="hover:bg-red focus:bg-red focus-visible:bg-red focus-within:bg-red pressed:bg-red disabled:bg-red pending:bg-red drop-target:bg-red dragging:bg-red empty:bg-red allows-dragging:bg-red allows-removing:bg-red allows-sorting:bg-red has-submenu:bg-red placeholder-shown:bg-red selected:bg-red indeterminate:bg-red read-only:bg-red required:bg-red entering:bg-red exiting:bg-red open:bg-red expanded:bg-red unavailable:bg-red outside-month:bg-red outside-visible-range:bg-red selection-start:bg-red selection-end:bg-red current:bg-red invalid:bg-red resizing:bg-red placement-left:bg-red placement-right:bg-red placement-top:bg-red placement-bottom:bg-red type-literal:bg-red type-year:bg-red type-month:bg-red type-day:bg-red layout-grid:bg-red layout-stack:bg-red orientation-horizontal:bg-red orientation-vertical:bg-red selection-single:bg-red selection-multiple:bg-red resizable-right:bg-red resizable-left:bg-red resizable-both:bg-red sort-ascending:bg-red sort-descending:bg-red group-pressed:bg-red peer-pressed:bg-red group-hover:bg-red group/custom-name group-hover/custom-name:bg-red peer-pressed/custom-name:bg-red"></div>
diff --git a/packages/tailwindcss-react-aria-components/package.json b/packages/tailwindcss-react-aria-components/package.json
index b47665db8fd..e76fb45aad5 100644
--- a/packages/tailwindcss-react-aria-components/package.json
+++ b/packages/tailwindcss-react-aria-components/package.json
@@ -16,11 +16,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "peerDependencies": {
-    "tailwindcss": "*"
+    "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "postcss": "^7.0.0",
-    "tailwindcss": "^3.2.2"
+    "tailwindcss": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/tailwindcss-react-aria-components/src/index.js b/packages/tailwindcss-react-aria-components/src/index.js
index 9a610775293..78115b309d3 100644
--- a/packages/tailwindcss-react-aria-components/src/index.js
+++ b/packages/tailwindcss-react-aria-components/src/index.js
@@ -79,14 +79,14 @@ const nativeMergeSelectors = new Map([
 ]);
 
 // If no prefix is specified, we want to avoid overriding native variants on non-RAC components, so we only target elements with the data-rac attribute for those variants.
-let getSelector = (prefix, attributeName, attributeValue, hoverOnlyWhenSupported) => {
+let getSelector = (prefix, attributeName, attributeValue) => {
   let baseSelector = attributeValue ? `[data-${attributeName}="${attributeValue}"]` : `[data-${attributeName}]`;
   let nativeSelector = nativeVariantSelectors.get(attributeName);
   if (prefix === '' && nativeSelector) {
     let wrappedNativeSelector = `&:where(:not([data-rac]))${nativeSelector}`;
     let nativeSelectorGenerator = wrappedNativeSelector;
-    if (nativeSelector === ':hover' && hoverOnlyWhenSupported) {
-      nativeSelectorGenerator = wrap => `@media (hover: hover) and (pointer: fine) { ${wrap(wrappedNativeSelector)} }`;
+    if (nativeSelector === ':hover') {
+      nativeSelectorGenerator = wrap => `@media (hover: hover) { ${wrap(wrappedNativeSelector)} }`;
     }
     return [`&:where([data-rac])${baseSelector}`, nativeSelectorGenerator];
   } else if (prefix === '' && nativeMergeSelectors.has(attributeName)) {
@@ -112,48 +112,30 @@ let wrapSelector = (selector, wrap) => {
   }
 };
 
-let addVariants = (variantName, selectors, addVariant, matchVariant) => {
+let addVariants = (variantName, selectors, addVariant) => {
   addVariant(variantName, mapSelector(selectors, selector => wrapSelector(selector, s => s)));
-  matchVariant(
-    'group',
-    (_, {modifier}) =>
-      modifier
-        ? mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.group\\/${modifier})${s.slice(1)} &`))
-        : mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.group)${s.slice(1)} &`)),
-    {values: {[variantName]: variantName}}
-  );
-  matchVariant(
-    'peer',
-    (_, {modifier}) =>
-      modifier
-        ? mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.peer\\/${modifier})${s.slice(1)} ~ &`))
-        : mapSelector(selectors, selector => wrapSelector(selector, s => `:merge(.peer)${s.slice(1)} ~ &`)),
-    {values: {[variantName]: variantName}}
-  );
 };
 
-module.exports = plugin.withOptions((options) => (({addVariant, matchVariant, config}) => {
+module.exports = plugin.withOptions((options) => (({addVariant}) => {
   let prefix = options?.prefix ? `${options.prefix}-` : '';
-  let future = config().future;
-  let hoverOnlyWhenSupported = future === 'all' || future?.hoverOnlyWhenSupported;
 
   // Enum attributes go first because currently they are all non-interactive states.
   Object.keys(attributes.enum).forEach((attributeName) => {
     attributes.enum[attributeName].forEach(
-      (attributeValue) => {
+      (attributeValue, i) => {
         let name = shortNames[attributeName] || attributeName;
         let variantName = `${prefix}${name}-${attributeValue}`;
-        let selectors = getSelector(prefix, attributeName, attributeValue, hoverOnlyWhenSupported);
-        addVariants(variantName, selectors, addVariant, matchVariant);
+        let selectors = getSelector(prefix, attributeName, attributeValue);
+        addVariants(variantName, selectors, addVariant, i);
       }
     );
   });
 
-  attributes.boolean.forEach((attribute) => {
+  attributes.boolean.forEach((attribute, i) => {
     let variantName = Array.isArray(attribute) ? attribute[0] : attribute;
     variantName = `${prefix}${variantName}`;
     let attributeName = Array.isArray(attribute) ? attribute[1] : attribute;
-    let selectors = getSelector(prefix, attributeName, null, hoverOnlyWhenSupported);
-    addVariants(variantName, selectors, addVariant, matchVariant);
+    let selectors = getSelector(prefix, attributeName, null);
+    addVariants(variantName, selectors, addVariant, i);
   });
 }));
diff --git a/packages/tailwindcss-react-aria-components/src/index.test.js b/packages/tailwindcss-react-aria-components/src/index.test.js
deleted file mode 100644
index 85a9d17d6c7..00000000000
--- a/packages/tailwindcss-react-aria-components/src/index.test.js
+++ /dev/null
@@ -1,554 +0,0 @@
-const path = require('path');
-const tailwind = require('tailwindcss');
-const postcss = require('postcss');
-
-let html = String.raw;
-let css = String.raw;
-
-function run({options, content, future = {}}) {
-  let {currentTestName} = expect.getState();
-  let config = {
-    plugins: [require('./index.js')(options)],
-    corePlugins: {preflight: false},
-    theme: {colors: {red: 'red'}},
-    content: [{raw: content}],
-    future
-  };
-    
-  return postcss(tailwind(config)).process(
-        ['@tailwind base;', '@tailwind components;', '@tailwind utilities'].join('\n'),
-    {
-      from: `${path.resolve(__filename)}?test=${currentTestName}`
-    }
-    );
-}
-
-test('variants', async () => {
-  let content = html`<div data-rac className="hover:bg-red focus:bg-red focus-visible:bg-red focus-within:bg-red pressed:bg-red disabled:bg-red pending:bg-red drop-target:bg-red dragging:bg-red empty:bg-red allows-dragging:bg-red allows-removing:bg-red allows-sorting:bg-red has-submenu:bg-red placeholder-shown:bg-red selected:bg-red indeterminate:bg-red read-only:bg-red required:bg-red entering:bg-red exiting:bg-red open:bg-red expanded:bg-red unavailable:bg-red outside-month:bg-red outside-visible-range:bg-red selection-start:bg-red selection-end:bg-red current:bg-red invalid:bg-red resizing:bg-red placement-left:bg-red placement-right:bg-red placement-top:bg-red placement-bottom:bg-red type-literal:bg-red type-year:bg-red type-month:bg-red type-day:bg-red layout-grid:bg-red layout-stack:bg-red orientation-horizontal:bg-red orientation-vertical:bg-red selection-single:bg-red selection-multiple:bg-red resizable-right:bg-red resizable-left:bg-red resizable-both:bg-red sort-ascending:bg-red sort-descending:bg-red group-pressed:bg-red peer-pressed:bg-red group-hover:bg-red group/custom-name group-hover/custom-name:bg-red peer-pressed/custom-name:bg-red"></div>`;
-  return run({content}).then((result) => {
-    expect(result.css).toContain(css`
-.placement-left\:bg-red[data-placement="left"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.placement-right\:bg-red[data-placement="right"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.placement-top\:bg-red[data-placement="top"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.placement-bottom\:bg-red[data-placement="bottom"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.type-literal\:bg-red[data-type="literal"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.type-year\:bg-red[data-type="year"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.type-month\:bg-red[data-type="month"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.type-day\:bg-red[data-type="day"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.layout-grid\:bg-red[data-layout="grid"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.layout-stack\:bg-red[data-layout="stack"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.orientation-horizontal\:bg-red[data-orientation="horizontal"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.orientation-vertical\:bg-red[data-orientation="vertical"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.selection-single\:bg-red[data-selection-mode="single"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.selection-multiple\:bg-red[data-selection-mode="multiple"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.resizable-right\:bg-red[data-resizable-direction="right"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.resizable-left\:bg-red[data-resizable-direction="left"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.resizable-both\:bg-red[data-resizable-direction="both"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.sort-ascending\:bg-red[data-sort-direction="ascending"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.sort-descending\:bg-red[data-sort-direction="descending"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.allows-removing\:bg-red[data-allows-removing] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.allows-sorting\:bg-red[data-allows-sorting] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.allows-dragging\:bg-red[data-allows-dragging] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.has-submenu\:bg-red[data-has-submenu] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.open\:bg-red:where([data-rac])[data-open] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.open\:bg-red:where(:not([data-rac]))[open] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.expanded\:bg-red:where([data-rac])[data-expanded] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.expanded\:bg-red:where(:not([data-rac]))[expanded] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.entering\:bg-red[data-entering] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.exiting\:bg-red[data-exiting] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.indeterminate\:bg-red:where([data-rac])[data-indeterminate] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.indeterminate\:bg-red:where(:not([data-rac])):indeterminate {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.placeholder-shown\:bg-red[data-placeholder] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.placeholder-shown\:bg-red:placeholder-shown {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.current\:bg-red[data-current] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.required\:bg-red:where([data-rac])[data-required] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.required\:bg-red:where(:not([data-rac])):required {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.unavailable\:bg-red[data-unavailable] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.invalid\:bg-red:where([data-rac])[data-invalid] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.invalid\:bg-red:where(:not([data-rac])):invalid {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.read-only\:bg-red:where([data-rac])[data-readonly] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.read-only\:bg-red:where(:not([data-rac])):read-only {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.outside-month\:bg-red[data-outside-month] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.outside-visible-range\:bg-red[data-outside-visible-range] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.pending\:bg-red[data-pending] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.empty\:bg-red:where([data-rac])[data-empty] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.empty\:bg-red:where(:not([data-rac])):empty {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.focus-within\:bg-red:where([data-rac])[data-focus-within] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.focus-within\:bg-red:where(:not([data-rac])):focus-within {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.hover\:bg-red:where([data-rac])[data-hovered] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.hover\:bg-red:where(:not([data-rac])):hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.group\/custom-name:where([data-rac])[data-hovered] .group-hover\/custom-name\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.group:where([data-rac])[data-hovered] .group-hover\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.group\/custom-name:where(:not([data-rac])):hover .group-hover\/custom-name\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.group:where(:not([data-rac])):hover .group-hover\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.focus\:bg-red:where([data-rac])[data-focused] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.focus\:bg-red:where(:not([data-rac])):focus {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.focus-visible\:bg-red:where([data-rac])[data-focus-visible] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.focus-visible\:bg-red:where(:not([data-rac])):focus-visible {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.pressed\:bg-red[data-pressed] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.group[data-pressed] .group-pressed\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.peer\/custom-name[data-pressed] ~ .peer-pressed\/custom-name\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.peer[data-pressed] ~ .peer-pressed\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.selected\:bg-red[data-selected] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.selection-start\:bg-red[data-selection-start] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.selection-end\:bg-red[data-selection-end] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.dragging\:bg-red[data-dragging] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.drop-target\:bg-red[data-drop-target] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.resizing\:bg-red[data-resizing] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.disabled\:bg-red:where([data-rac])[data-disabled] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.disabled\:bg-red:where(:not([data-rac])):disabled {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}`
-        );
-  });
-});
-
-test('variants with prefix', async () => {
-  let content = html`<div data-rac className="rac-hover:bg-red rac-focus:bg-red rac-focus-visible:bg-red rac-focus-within:bg-red rac-pressed:bg-red rac-disabled:bg-red rac-pending:bg-red rac-drop-target:bg-red rac-dragging:bg-red rac-empty:bg-red rac-allows-dragging:bg-red rac-allows-removing:bg-red rac-allows-sorting:bg-red rac-has-submenu:bg-red rac-placeholder-shown:bg-red rac-selected:bg-red rac-indeterminate:bg-red rac-read-only:bg-red rac-required:bg-red rac-entering:bg-red rac-exiting:bg-red rac-open:bg-red rac-expanded:bg-red rac-unavailable:bg-red rac-outside-month:bg-red rac-outside-visible-range:bg-red rac-selection-start:bg-red rac-selection-end:bg-red rac-current:bg-red rac-invalid:bg-red rac-resizing:bg-red rac-placement-left:bg-red rac-placement-right:bg-red rac-placement-top:bg-red rac-placement-bottom:bg-red rac-type-literal:bg-red rac-type-year:bg-red rac-type-month:bg-red rac-type-day:bg-red rac-layout-grid:bg-red rac-layout-stack:bg-red rac-orientation-horizontal:bg-red rac-orientation-vertical:bg-red rac-selection-single:bg-red rac-selection-multiple:bg-red rac-resizable-right:bg-red rac-resizable-left:bg-red rac-resizable-both:bg-red rac-sort-ascending:bg-red rac-sort-descending:bg-red group-rac-pressed:bg-red group/custom-name group-rac-hover/custom-name:bg-red peer-rac-pressed:bg-red peer-rac-pressed/custom-name:bg-red"></div>`;
-  return run({content, options: {prefix: 'rac'}}).then((result) => {
-    expect(result.css).toContain(css`
-.rac-placement-left\:bg-red[data-placement="left"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-placement-right\:bg-red[data-placement="right"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-placement-top\:bg-red[data-placement="top"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-placement-bottom\:bg-red[data-placement="bottom"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-type-literal\:bg-red[data-type="literal"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-type-year\:bg-red[data-type="year"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-type-month\:bg-red[data-type="month"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-type-day\:bg-red[data-type="day"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-layout-grid\:bg-red[data-layout="grid"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-layout-stack\:bg-red[data-layout="stack"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-orientation-horizontal\:bg-red[data-orientation="horizontal"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-orientation-vertical\:bg-red[data-orientation="vertical"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-selection-single\:bg-red[data-selection-mode="single"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-selection-multiple\:bg-red[data-selection-mode="multiple"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-resizable-right\:bg-red[data-resizable-direction="right"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-resizable-left\:bg-red[data-resizable-direction="left"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-resizable-both\:bg-red[data-resizable-direction="both"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-sort-ascending\:bg-red[data-sort-direction="ascending"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-sort-descending\:bg-red[data-sort-direction="descending"] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-allows-removing\:bg-red[data-allows-removing] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-allows-sorting\:bg-red[data-allows-sorting] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-allows-dragging\:bg-red[data-allows-dragging] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-has-submenu\:bg-red[data-has-submenu] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-open\:bg-red[data-open] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-expanded\:bg-red[data-expanded] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-entering\:bg-red[data-entering] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-exiting\:bg-red[data-exiting] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-indeterminate\:bg-red[data-indeterminate] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-placeholder-shown\:bg-red[data-placeholder] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-current\:bg-red[data-current] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-required\:bg-red[data-required] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-unavailable\:bg-red[data-unavailable] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-invalid\:bg-red[data-invalid] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-read-only\:bg-red[data-readonly] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-outside-month\:bg-red[data-outside-month] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-outside-visible-range\:bg-red[data-outside-visible-range] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-pending\:bg-red[data-pending] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-empty\:bg-red[data-empty] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-focus-within\:bg-red[data-focus-within] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-hover\:bg-red[data-hovered] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.group\/custom-name[data-hovered] .group-rac-hover\/custom-name\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-focus\:bg-red[data-focused] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-focus-visible\:bg-red[data-focus-visible] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-pressed\:bg-red[data-pressed] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.group[data-pressed] .group-rac-pressed\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.peer\/custom-name[data-pressed] ~ .peer-rac-pressed\/custom-name\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.peer[data-pressed] ~ .peer-rac-pressed\:bg-red {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-selected\:bg-red[data-selected] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-selection-start\:bg-red[data-selection-start] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-selection-end\:bg-red[data-selection-end] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-dragging\:bg-red[data-dragging] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-drop-target\:bg-red[data-drop-target] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-resizing\:bg-red[data-resizing] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-.rac-disabled\:bg-red[data-disabled] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}`
-        );
-  });
-});
-
-test('hoverOnlyWhenSupported', () => {
-  let content = html`<div data-rac className="hover:bg-red"></div>`;
-  return run({content, future: {hoverOnlyWhenSupported: true}}).then((result) => {
-    expect(result.css).toContain(css`
-.hover\:bg-red:where([data-rac])[data-hovered] {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-}
-@media (hover: hover) and (pointer: fine) {
-    .hover\:bg-red:where(:not([data-rac])):hover {
-        --tw-bg-opacity: 1;
-        background-color: rgb(255 0 0 / var(--tw-bg-opacity))
-    }
-}`);
-  });
-});
-    
diff --git a/packages/tailwindcss-react-aria-components/test/__snapshots__/index.test.js.snap b/packages/tailwindcss-react-aria-components/test/__snapshots__/index.test.js.snap
new file mode 100644
index 00000000000..62fdcfdea28
--- /dev/null
+++ b/packages/tailwindcss-react-aria-components/test/__snapshots__/index.test.js.snap
@@ -0,0 +1,615 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`variants 1`] = `
+"/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
+.group-hover\\:bg-red {
+  &:is(:where(.group):where([data-rac])[data-hovered] *) {
+    background-color: var(--color-red);
+  }
+  @media (hover: hover) {
+    &:is(:where(.group):where(:not([data-rac])):hover *) {
+      background-color: var(--color-red);
+    }
+  }
+}
+.group-hover\\/custom-name\\:bg-red {
+  &:is(:where(.group\\/custom-name):where([data-rac])[data-hovered] *) {
+    background-color: var(--color-red);
+  }
+  @media (hover: hover) {
+    &:is(:where(.group\\/custom-name):where(:not([data-rac])):hover *) {
+      background-color: var(--color-red);
+    }
+  }
+}
+.group-pressed\\:bg-red {
+  &:is(:where(.group)[data-pressed] *) {
+    background-color: var(--color-red);
+  }
+}
+.peer-pressed\\:bg-red {
+  &:is(:where(.peer)[data-pressed] ~ *) {
+    background-color: var(--color-red);
+  }
+}
+.peer-pressed\\/custom-name\\:bg-red {
+  &:is(:where(.peer\\/custom-name)[data-pressed] ~ *) {
+    background-color: var(--color-red);
+  }
+}
+.open\\:bg-red {
+  &:where([data-rac])[data-open] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac]))[open] {
+    background-color: var(--color-red);
+  }
+}
+.indeterminate\\:bg-red {
+  &:where([data-rac])[data-indeterminate] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):indeterminate {
+    background-color: var(--color-red);
+  }
+}
+.placeholder-shown\\:bg-red {
+  &[data-placeholder] {
+    background-color: var(--color-red);
+  }
+  &:placeholder-shown {
+    background-color: var(--color-red);
+  }
+}
+.required\\:bg-red {
+  &:where([data-rac])[data-required] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):required {
+    background-color: var(--color-red);
+  }
+}
+.invalid\\:bg-red {
+  &:where([data-rac])[data-invalid] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):invalid {
+    background-color: var(--color-red);
+  }
+}
+.read-only\\:bg-red {
+  &:where([data-rac])[data-readonly] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):read-only {
+    background-color: var(--color-red);
+  }
+}
+.empty\\:bg-red {
+  &:where([data-rac])[data-empty] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):empty {
+    background-color: var(--color-red);
+  }
+}
+.focus-within\\:bg-red {
+  &:where([data-rac])[data-focus-within] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):focus-within {
+    background-color: var(--color-red);
+  }
+}
+.hover\\:bg-red {
+  &:where([data-rac])[data-hovered] {
+    background-color: var(--color-red);
+  }
+  @media (hover: hover) {
+    &:where(:not([data-rac])):hover {
+      background-color: var(--color-red);
+    }
+  }
+}
+.focus\\:bg-red {
+  &:where([data-rac])[data-focused] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):focus {
+    background-color: var(--color-red);
+  }
+}
+.focus-visible\\:bg-red {
+  &:where([data-rac])[data-focus-visible] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):focus-visible {
+    background-color: var(--color-red);
+  }
+}
+.disabled\\:bg-red {
+  &:where([data-rac])[data-disabled] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac])):disabled {
+    background-color: var(--color-red);
+  }
+}
+.placement-left\\:bg-red {
+  &[data-placement="left"] {
+    background-color: var(--color-red);
+  }
+}
+.placement-right\\:bg-red {
+  &[data-placement="right"] {
+    background-color: var(--color-red);
+  }
+}
+.placement-top\\:bg-red {
+  &[data-placement="top"] {
+    background-color: var(--color-red);
+  }
+}
+.placement-bottom\\:bg-red {
+  &[data-placement="bottom"] {
+    background-color: var(--color-red);
+  }
+}
+.type-literal\\:bg-red {
+  &[data-type="literal"] {
+    background-color: var(--color-red);
+  }
+}
+.type-year\\:bg-red {
+  &[data-type="year"] {
+    background-color: var(--color-red);
+  }
+}
+.type-month\\:bg-red {
+  &[data-type="month"] {
+    background-color: var(--color-red);
+  }
+}
+.type-day\\:bg-red {
+  &[data-type="day"] {
+    background-color: var(--color-red);
+  }
+}
+.layout-grid\\:bg-red {
+  &[data-layout="grid"] {
+    background-color: var(--color-red);
+  }
+}
+.layout-stack\\:bg-red {
+  &[data-layout="stack"] {
+    background-color: var(--color-red);
+  }
+}
+.orientation-horizontal\\:bg-red {
+  &[data-orientation="horizontal"] {
+    background-color: var(--color-red);
+  }
+}
+.orientation-vertical\\:bg-red {
+  &[data-orientation="vertical"] {
+    background-color: var(--color-red);
+  }
+}
+.selection-single\\:bg-red {
+  &[data-selection-mode="single"] {
+    background-color: var(--color-red);
+  }
+}
+.selection-multiple\\:bg-red {
+  &[data-selection-mode="multiple"] {
+    background-color: var(--color-red);
+  }
+}
+.resizable-right\\:bg-red {
+  &[data-resizable-direction="right"] {
+    background-color: var(--color-red);
+  }
+}
+.resizable-left\\:bg-red {
+  &[data-resizable-direction="left"] {
+    background-color: var(--color-red);
+  }
+}
+.resizable-both\\:bg-red {
+  &[data-resizable-direction="both"] {
+    background-color: var(--color-red);
+  }
+}
+.sort-ascending\\:bg-red {
+  &[data-sort-direction="ascending"] {
+    background-color: var(--color-red);
+  }
+}
+.sort-descending\\:bg-red {
+  &[data-sort-direction="descending"] {
+    background-color: var(--color-red);
+  }
+}
+.allows-removing\\:bg-red {
+  &[data-allows-removing] {
+    background-color: var(--color-red);
+  }
+}
+.allows-sorting\\:bg-red {
+  &[data-allows-sorting] {
+    background-color: var(--color-red);
+  }
+}
+.allows-dragging\\:bg-red {
+  &[data-allows-dragging] {
+    background-color: var(--color-red);
+  }
+}
+.has-submenu\\:bg-red {
+  &[data-has-submenu] {
+    background-color: var(--color-red);
+  }
+}
+.expanded\\:bg-red {
+  &:where([data-rac])[data-expanded] {
+    background-color: var(--color-red);
+  }
+  &:where(:not([data-rac]))[expanded] {
+    background-color: var(--color-red);
+  }
+}
+.entering\\:bg-red {
+  &[data-entering] {
+    background-color: var(--color-red);
+  }
+}
+.exiting\\:bg-red {
+  &[data-exiting] {
+    background-color: var(--color-red);
+  }
+}
+.current\\:bg-red {
+  &[data-current] {
+    background-color: var(--color-red);
+  }
+}
+.unavailable\\:bg-red {
+  &[data-unavailable] {
+    background-color: var(--color-red);
+  }
+}
+.outside-month\\:bg-red {
+  &[data-outside-month] {
+    background-color: var(--color-red);
+  }
+}
+.outside-visible-range\\:bg-red {
+  &[data-outside-visible-range] {
+    background-color: var(--color-red);
+  }
+}
+.pending\\:bg-red {
+  &[data-pending] {
+    background-color: var(--color-red);
+  }
+}
+.pressed\\:bg-red {
+  &[data-pressed] {
+    background-color: var(--color-red);
+  }
+}
+.selected\\:bg-red {
+  &[data-selected] {
+    background-color: var(--color-red);
+  }
+}
+.selection-start\\:bg-red {
+  &[data-selection-start] {
+    background-color: var(--color-red);
+  }
+}
+.selection-end\\:bg-red {
+  &[data-selection-end] {
+    background-color: var(--color-red);
+  }
+}
+.dragging\\:bg-red {
+  &[data-dragging] {
+    background-color: var(--color-red);
+  }
+}
+.drop-target\\:bg-red {
+  &[data-drop-target] {
+    background-color: var(--color-red);
+  }
+}
+.resizing\\:bg-red {
+  &[data-resizing] {
+    background-color: var(--color-red);
+  }
+}
+:root {
+  --color-red: red
+;
+}
+"
+`;
+
+exports[`variants with prefix 1`] = `
+"/*! tailwindcss v4.0.0 | MIT License | https://tailwindcss.com */
+.group-rac-hover\\/custom-name\\:bg-red {
+  &:is(:where(.group\\/custom-name)[data-hovered] *) {
+    background-color: var(--color-red);
+  }
+}
+.group-rac-pressed\\:bg-red {
+  &:is(:where(.group)[data-pressed] *) {
+    background-color: var(--color-red);
+  }
+}
+.peer-rac-pressed\\:bg-red {
+  &:is(:where(.peer)[data-pressed] ~ *) {
+    background-color: var(--color-red);
+  }
+}
+.peer-rac-pressed\\/custom-name\\:bg-red {
+  &:is(:where(.peer\\/custom-name)[data-pressed] ~ *) {
+    background-color: var(--color-red);
+  }
+}
+.rac-placement-left\\:bg-red {
+  &[data-placement="left"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-placement-right\\:bg-red {
+  &[data-placement="right"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-placement-top\\:bg-red {
+  &[data-placement="top"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-placement-bottom\\:bg-red {
+  &[data-placement="bottom"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-type-literal\\:bg-red {
+  &[data-type="literal"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-type-year\\:bg-red {
+  &[data-type="year"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-type-month\\:bg-red {
+  &[data-type="month"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-type-day\\:bg-red {
+  &[data-type="day"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-layout-grid\\:bg-red {
+  &[data-layout="grid"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-layout-stack\\:bg-red {
+  &[data-layout="stack"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-orientation-horizontal\\:bg-red {
+  &[data-orientation="horizontal"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-orientation-vertical\\:bg-red {
+  &[data-orientation="vertical"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-selection-single\\:bg-red {
+  &[data-selection-mode="single"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-selection-multiple\\:bg-red {
+  &[data-selection-mode="multiple"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-resizable-right\\:bg-red {
+  &[data-resizable-direction="right"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-resizable-left\\:bg-red {
+  &[data-resizable-direction="left"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-resizable-both\\:bg-red {
+  &[data-resizable-direction="both"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-sort-ascending\\:bg-red {
+  &[data-sort-direction="ascending"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-sort-descending\\:bg-red {
+  &[data-sort-direction="descending"] {
+    background-color: var(--color-red);
+  }
+}
+.rac-allows-removing\\:bg-red {
+  &[data-allows-removing] {
+    background-color: var(--color-red);
+  }
+}
+.rac-allows-sorting\\:bg-red {
+  &[data-allows-sorting] {
+    background-color: var(--color-red);
+  }
+}
+.rac-allows-dragging\\:bg-red {
+  &[data-allows-dragging] {
+    background-color: var(--color-red);
+  }
+}
+.rac-has-submenu\\:bg-red {
+  &[data-has-submenu] {
+    background-color: var(--color-red);
+  }
+}
+.rac-open\\:bg-red {
+  &[data-open] {
+    background-color: var(--color-red);
+  }
+}
+.rac-expanded\\:bg-red {
+  &[data-expanded] {
+    background-color: var(--color-red);
+  }
+}
+.rac-entering\\:bg-red {
+  &[data-entering] {
+    background-color: var(--color-red);
+  }
+}
+.rac-exiting\\:bg-red {
+  &[data-exiting] {
+    background-color: var(--color-red);
+  }
+}
+.rac-indeterminate\\:bg-red {
+  &[data-indeterminate] {
+    background-color: var(--color-red);
+  }
+}
+.rac-placeholder-shown\\:bg-red {
+  &[data-placeholder] {
+    background-color: var(--color-red);
+  }
+}
+.rac-current\\:bg-red {
+  &[data-current] {
+    background-color: var(--color-red);
+  }
+}
+.rac-required\\:bg-red {
+  &[data-required] {
+    background-color: var(--color-red);
+  }
+}
+.rac-unavailable\\:bg-red {
+  &[data-unavailable] {
+    background-color: var(--color-red);
+  }
+}
+.rac-invalid\\:bg-red {
+  &[data-invalid] {
+    background-color: var(--color-red);
+  }
+}
+.rac-read-only\\:bg-red {
+  &[data-readonly] {
+    background-color: var(--color-red);
+  }
+}
+.rac-outside-month\\:bg-red {
+  &[data-outside-month] {
+    background-color: var(--color-red);
+  }
+}
+.rac-outside-visible-range\\:bg-red {
+  &[data-outside-visible-range] {
+    background-color: var(--color-red);
+  }
+}
+.rac-pending\\:bg-red {
+  &[data-pending] {
+    background-color: var(--color-red);
+  }
+}
+.rac-empty\\:bg-red {
+  &[data-empty] {
+    background-color: var(--color-red);
+  }
+}
+.rac-focus-within\\:bg-red {
+  &[data-focus-within] {
+    background-color: var(--color-red);
+  }
+}
+.rac-hover\\:bg-red {
+  &[data-hovered] {
+    background-color: var(--color-red);
+  }
+}
+.rac-focus\\:bg-red {
+  &[data-focused] {
+    background-color: var(--color-red);
+  }
+}
+.rac-focus-visible\\:bg-red {
+  &[data-focus-visible] {
+    background-color: var(--color-red);
+  }
+}
+.rac-pressed\\:bg-red {
+  &[data-pressed] {
+    background-color: var(--color-red);
+  }
+}
+.rac-selected\\:bg-red {
+  &[data-selected] {
+    background-color: var(--color-red);
+  }
+}
+.rac-selection-start\\:bg-red {
+  &[data-selection-start] {
+    background-color: var(--color-red);
+  }
+}
+.rac-selection-end\\:bg-red {
+  &[data-selection-end] {
+    background-color: var(--color-red);
+  }
+}
+.rac-dragging\\:bg-red {
+  &[data-dragging] {
+    background-color: var(--color-red);
+  }
+}
+.rac-drop-target\\:bg-red {
+  &[data-drop-target] {
+    background-color: var(--color-red);
+  }
+}
+.rac-resizing\\:bg-red {
+  &[data-resizing] {
+    background-color: var(--color-red);
+  }
+}
+.rac-disabled\\:bg-red {
+  &[data-disabled] {
+    background-color: var(--color-red);
+  }
+}
+:root {
+  --color-red: red
+;
+}
+"
+`;
diff --git a/packages/tailwindcss-react-aria-components/test/index.test.js b/packages/tailwindcss-react-aria-components/test/index.test.js
new file mode 100644
index 00000000000..748d1669dad
--- /dev/null
+++ b/packages/tailwindcss-react-aria-components/test/index.test.js
@@ -0,0 +1,46 @@
+const path = require('path');
+const tailwind = require('@tailwindcss/postcss');
+const postcss = require('postcss');
+
+let css = String.raw;
+
+// jest doesn't have this in its environment?
+global.structuredClone = a => JSON.parse(JSON.stringify(a));
+
+function run(content) {
+  let {currentTestName} = expect.getState();
+  return postcss(tailwind()).process(
+    content,
+    {
+      from: `${path.resolve(__filename)}?test=${currentTestName}`
+    }
+  );
+}
+
+test('variants', async () => {
+  return run(css`
+@import "tailwindcss/utilities.css" source(none);
+@source "../fixtures/variants.html";
+@plugin "tailwindcss-react-aria-components";
+@theme {
+  --color-red: red
+}
+`).then((result) => {
+  expect(result.css).toMatchSnapshot();
+});
+});
+
+test('variants with prefix', async () => {
+  return run(css`
+@import "tailwindcss/utilities.css" source(none);
+@source "../fixtures/prefix.html";
+@plugin "tailwindcss-react-aria-components" {
+  prefix: rac;
+}
+@theme {
+  --color-red: red
+}
+`).then((result) => {
+  expect(result.css).toMatchSnapshot();
+});
+});
diff --git a/starters/tailwind/src/Calendar.tsx b/starters/tailwind/src/Calendar.tsx
index 68bb2b608ac..23968491b09 100644
--- a/starters/tailwind/src/Calendar.tsx
+++ b/starters/tailwind/src/Calendar.tsx
@@ -19,7 +19,7 @@ import { focusRing } from './utils';
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'w-9 h-9 text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none',
+  base: 'w-9 h-9 m-px text-sm cursor-default rounded-full flex items-center justify-center forced-color-adjust-none',
   variants: {
     isSelected: {
       false: 'text-zinc-900 dark:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 pressed:bg-gray-200 dark:pressed:bg-zinc-600',
diff --git a/starters/tailwind/src/ListBox.tsx b/starters/tailwind/src/ListBox.tsx
index 5a40c8b5c20..a70f75f4279 100644
--- a/starters/tailwind/src/ListBox.tsx
+++ b/starters/tailwind/src/ListBox.tsx
@@ -96,7 +96,7 @@ export interface DropdownSectionProps<T> extends SectionProps<T> {
 export function DropdownSection<T extends object>(props: DropdownSectionProps<T>) {
   return (
     <ListBoxSection className="first:-mt-[5px] after:content-[''] after:block after:h-[5px]">
-      <Header className="text-sm font-semibold text-gray-500 dark:text-zinc-300 px-4 py-1 truncate sticky -top-[5px] -mt-px -mx-1 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 border-y dark:border-y-zinc-700 [&+*]:mt-1">{props.title}</Header>
+      <Header className="text-sm font-semibold text-gray-500 dark:text-zinc-300 px-4 py-1 truncate sticky -top-[5px] -mt-px -mx-1 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 border-y border-y-gray-200 dark:border-y-zinc-700 [&+*]:mt-1">{props.title}</Header>
       <Collection items={props.items}>
         {props.children}
       </Collection>
diff --git a/starters/tailwind/src/Menu.tsx b/starters/tailwind/src/Menu.tsx
index d1e4f34431d..c635f665269 100644
--- a/starters/tailwind/src/Menu.tsx
+++ b/starters/tailwind/src/Menu.tsx
@@ -60,7 +60,7 @@ export interface MenuSectionProps<T> extends AriaMenuSectionProps<T> {
 export function MenuSection<T extends object>(props: MenuSectionProps<T>) {
   return (
     <AriaMenuSection className="first:-mt-[5px] after:content-[''] after:block after:h-[5px]">
-      <Header className="text-sm font-semibold text-gray-500 dark:text-zinc-300 px-4 py-1 truncate sticky -top-[5px] -mt-px -mx-1 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 border-y dark:border-y-zinc-700 [&+*]:mt-1">{props.title}</Header>
+      <Header className="text-sm font-semibold text-gray-500 dark:text-zinc-300 px-4 py-1 truncate sticky -top-[5px] -mt-px -mx-1 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 border-y border-y-gray-200 dark:border-y-zinc-700 [&+*]:mt-1">{props.title}</Header>
       <Collection items={props.items}>
         {props.children}
       </Collection>
diff --git a/starters/tailwind/src/Table.tsx b/starters/tailwind/src/Table.tsx
index 3a10c921381..85082cb4fe7 100644
--- a/starters/tailwind/src/Table.tsx
+++ b/starters/tailwind/src/Table.tsx
@@ -26,7 +26,7 @@ import { composeTailwindRenderProps, focusRing } from './utils';
 
 export function Table(props: TableProps) {
   return (
-    <ResizableTableContainer className="max-h-[280px] w-[550px] overflow-auto scroll-pt-[2.281rem] relative border dark:border-zinc-600 rounded-lg">
+    <ResizableTableContainer className="max-h-[280px] w-[550px] overflow-auto scroll-pt-[2.281rem] relative border border-gray-200 dark:border-zinc-600 rounded-lg">
       <AriaTable {...props} className="border-separate border-spacing-0" />
     </ResizableTableContainer>
   );
@@ -74,7 +74,7 @@ export function TableHeader<T extends object>(props: TableHeaderProps<T>) {
   let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
 
   return (
-    <AriaTableHeader {...props} className={composeTailwindRenderProps(props.className, 'sticky top-0 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas] rounded-t-lg border-b dark:border-b-zinc-700')}>
+    <AriaTableHeader {...props} className={composeTailwindRenderProps(props.className, 'sticky top-0 z-10 bg-gray-100/60 dark:bg-zinc-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-gray-100 dark:supports-[-moz-appearance:none]:bg-zinc-700 forced-colors:bg-[Canvas] rounded-t-lg border-b border-b-gray-200 dark:border-b-zinc-700')}>
       {/* Add extra columns for drag and drop and selection. */}
       {allowsDragging && <Column />}
       {selectionBehavior === 'toggle' && (
@@ -120,7 +120,7 @@ export function Row<T extends object>(
 
 const cellStyles = tv({
   extend: focusRing,
-  base: 'border-b dark:border-b-zinc-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2'
+  base: 'border-b border-b-gray-200 dark:border-b-zinc-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) in-[:has(+[data-selected])]:border-(--selected-border) p-2 truncate -outline-offset-2'
 });
 
 export function Cell(props: CellProps) {
diff --git a/yarn.lock b/yarn.lock
index d472e7d2031..a90d5dbe35e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3056,7 +3056,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.3.0, @jridgewell/gen-mapping@npm:^0.3.2, @jridgewell/gen-mapping@npm:^0.3.5":
+"@jridgewell/gen-mapping@npm:^0.3.0, @jridgewell/gen-mapping@npm:^0.3.5":
   version: 0.3.5
   resolution: "@jridgewell/gen-mapping@npm:0.3.5"
   dependencies:
@@ -12404,13 +12404,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arg@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "arg@npm:5.0.2"
-  checksum: 10c0/ccaf86f4e05d342af6666c569f844bec426595c567d32a8289715087825c2ca7edd8a3d204e4d2fb2aa4602e09a57d0c13ea8c9eea75aac3dbb4af5514e6800e
-  languageName: node
-  linkType: hard
-
 "argparse@npm:^1.0.7":
   version: 1.0.10
   resolution: "argparse@npm:1.0.10"
@@ -14342,7 +14335,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.4.0, chokidar@npm:^3.5.3, chokidar@npm:^3.6.0":
+"chokidar@npm:^3.4.0, chokidar@npm:^3.6.0":
   version: 3.6.0
   resolution: "chokidar@npm:3.6.0"
   dependencies:
@@ -14871,7 +14864,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^4.0.0, commander@npm:^4.0.1":
+"commander@npm:^4.0.1":
   version: 4.1.1
   resolution: "commander@npm:4.1.1"
   checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab
@@ -15585,15 +15578,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssesc@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "cssesc@npm:3.0.0"
-  bin:
-    cssesc: bin/cssesc
-  checksum: 10c0/6bcfd898662671be15ae7827120472c5667afb3d7429f1f917737f3bf84c4176003228131b643ae74543f17a394446247df090c597bb9a728cce298606ed0aa7
-  languageName: node
-  linkType: hard
-
 "cssmin@npm:0.3.x":
   version: 0.3.2
   resolution: "cssmin@npm:0.3.2"
@@ -16329,13 +16313,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"didyoumean@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "didyoumean@npm:1.2.2"
-  checksum: 10c0/95d0b53d23b851aacff56dfadb7ecfedce49da4232233baecfeecb7710248c4aa03f0aa8995062f0acafaf925adf8536bd7044a2e68316fd7d411477599bc27b
-  languageName: node
-  linkType: hard
-
 "diff-sequences@npm:^25.1.0":
   version: 25.1.0
   resolution: "diff-sequences@npm:25.1.0"
@@ -16408,13 +16385,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dlv@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "dlv@npm:1.1.3"
-  checksum: 10c0/03eb4e769f19a027fd5b43b59e8a05e3fd2100ac239ebb0bf9a745de35d449e2f25cfaf3aa3934664551d72856f4ae8b7822016ce5c42c2d27c18ae79429ec42
-  languageName: node
-  linkType: hard
-
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -18200,7 +18170,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.0.3, fast-glob@npm:^3.1.0, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.0.3, fast-glob@npm:^3.1.0, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -19495,20 +19465,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:7.1.6":
-  version: 7.1.6
-  resolution: "glob@npm:7.1.6"
-  dependencies:
-    fs.realpath: "npm:^1.0.0"
-    inflight: "npm:^1.0.4"
-    inherits: "npm:2"
-    minimatch: "npm:^3.0.4"
-    once: "npm:^1.3.0"
-    path-is-absolute: "npm:^1.0.0"
-  checksum: 10c0/2575cce9306ac534388db751f0aa3e78afedb6af8f3b529ac6b2354f66765545145dba8530abf7bff49fb399a047d3f9b6901c38ee4c9503f592960d9af67763
-  languageName: node
-  linkType: hard
-
 "glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10":
   version: 10.4.1
   resolution: "glob@npm:10.4.1"
@@ -22810,15 +22766,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jiti@npm:^1.19.1":
-  version: 1.21.0
-  resolution: "jiti@npm:1.21.0"
-  bin:
-    jiti: bin/jiti.js
-  checksum: 10c0/7f361219fe6c7a5e440d5f1dba4ab763a5538d2df8708cdc22561cf25ea3e44b837687931fca7cdd8cdd9f567300e90be989dd1321650045012d8f9ed6aab07f
-  languageName: node
-  linkType: hard
-
 "jiti@npm:^2.4.2":
   version: 2.4.2
   resolution: "jiti@npm:2.4.2"
@@ -23785,13 +23732,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^2.0.5, lilconfig@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "lilconfig@npm:2.1.0"
-  checksum: 10c0/64645641aa8d274c99338e130554abd6a0190533c0d9eb2ce7ebfaf2e05c7d9961f3ffe2bfa39efd3b60c521ba3dd24fa236fe2775fc38501bf82bf49d4678b8
-  languageName: node
-  linkType: hard
-
 "limiter@npm:^1.0.5":
   version: 1.1.4
   resolution: "limiter@npm:1.1.4"
@@ -26045,7 +25985,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mz@npm:^2.5.0, mz@npm:^2.7.0":
+"mz@npm:^2.5.0":
   version: 2.7.0
   resolution: "mz@npm:2.7.0"
   dependencies:
@@ -26790,13 +26730,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-hash@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "object-hash@npm:3.0.0"
-  checksum: 10c0/a06844537107b960c1c8b96cd2ac8592a265186bfa0f6ccafe0d34eabdb526f6fa81da1f37c43df7ed13b12a4ae3457a16071603bcd39d8beddb5f08c37b0f47
-  languageName: node
-  linkType: hard
-
 "object-inspect@npm:^1.13.1":
   version: 1.13.2
   resolution: "object-inspect@npm:1.13.2"
@@ -28132,7 +28065,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pirates@npm:^4.0.1, pirates@npm:^4.0.4, pirates@npm:^4.0.6":
+"pirates@npm:^4.0.4, pirates@npm:^4.0.6":
   version: 4.0.6
   resolution: "pirates@npm:4.0.6"
   checksum: 10c0/00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36
@@ -28376,17 +28309,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-js@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "postcss-js@npm:4.0.1"
-  dependencies:
-    camelcase-css: "npm:^2.0.1"
-  peerDependencies:
-    postcss: ^8.4.21
-  checksum: 10c0/af35d55cb873b0797d3b42529514f5318f447b134541844285c9ac31a17497297eb72296902967911bb737a75163441695737300ce2794e3bd8c70c13a3b106e
-  languageName: node
-  linkType: hard
-
 "postcss-load-config@npm:^1.2.0":
   version: 1.2.0
   resolution: "postcss-load-config@npm:1.2.0"
@@ -28399,24 +28321,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-load-config@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "postcss-load-config@npm:4.0.1"
-  dependencies:
-    lilconfig: "npm:^2.0.5"
-    yaml: "npm:^2.1.1"
-  peerDependencies:
-    postcss: ">=8.0.9"
-    ts-node: ">=9.0.0"
-  peerDependenciesMeta:
-    postcss:
-      optional: true
-    ts-node:
-      optional: true
-  checksum: 10c0/5f568420c4d758d77d661f26914c08fe8dfb0666c7b779dc4f48d7fd880d131e8aa232a45cc1a8ba3f47f9c5fca572b661ca0103c2212979e9dc00918cff3d5f
-  languageName: node
-  linkType: hard
-
 "postcss-load-options@npm:^1.2.0":
   version: 1.2.0
   resolution: "postcss-load-options@npm:1.2.0"
@@ -28460,17 +28364,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-nested@npm:^6.0.1":
-  version: 6.0.1
-  resolution: "postcss-nested@npm:6.0.1"
-  dependencies:
-    postcss-selector-parser: "npm:^6.0.11"
-  peerDependencies:
-    postcss: ^8.2.14
-  checksum: 10c0/2a50aa36d5d103c2e471954830489f4c024deed94fa066169101db55171368d5f80b32446b584029e0471feee409293d0b6b1d8ede361f6675ba097e477b3cbd
-  languageName: node
-  linkType: hard
-
 "postcss-selector-parser@npm:^2.2.2, postcss-selector-parser@npm:^2.2.3":
   version: 2.2.3
   resolution: "postcss-selector-parser@npm:2.2.3"
@@ -28493,16 +28386,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^6.0.11":
-  version: 6.0.13
-  resolution: "postcss-selector-parser@npm:6.0.13"
-  dependencies:
-    cssesc: "npm:^3.0.0"
-    util-deprecate: "npm:^1.0.2"
-  checksum: 10c0/51f099b27f7c7198ea1826470ef0adfa58b3bd3f59b390fda123baa0134880a5fa9720137b6009c4c1373357b144f700b0edac73335d0067422063129371444e
-  languageName: node
-  linkType: hard
-
 "postcss-simple-vars@npm:^5.0.2":
   version: 5.0.2
   resolution: "postcss-simple-vars@npm:5.0.2"
@@ -30551,7 +30434,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.11.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.2, resolve@npm:^1.22.4, resolve@npm:^1.4.0":
+"resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.11.0, resolve@npm:^1.14.2, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.4, resolve@npm:^1.4.0":
   version: 1.22.8
   resolution: "resolve@npm:1.22.8"
   dependencies:
@@ -30577,7 +30460,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.11.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.1.6#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.10.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.11.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.14.2#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.17.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.19.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.4.0#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
   dependencies:
@@ -32415,24 +32298,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sucrase@npm:^3.32.0":
-  version: 3.34.0
-  resolution: "sucrase@npm:3.34.0"
-  dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.2"
-    commander: "npm:^4.0.0"
-    glob: "npm:7.1.6"
-    lines-and-columns: "npm:^1.1.6"
-    mz: "npm:^2.7.0"
-    pirates: "npm:^4.0.1"
-    ts-interface-checker: "npm:^0.1.9"
-  bin:
-    sucrase: bin/sucrase
-    sucrase-node: bin/sucrase-node
-  checksum: 10c0/83e524f2b9386c7029fc9e46b8d608485866d08bea5a0a71e9e3442dc12e1d05a5ab555808d1922f45dd012fc71043479d778aac07391d9740daabe45730a056
-  languageName: node
-  linkType: hard
-
 "sugarss@npm:^2.0.0":
   version: 2.0.0
   resolution: "sugarss@npm:2.0.0"
@@ -32607,8 +32472,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "tailwindcss-react-aria-components@workspace:packages/tailwindcss-react-aria-components"
   dependencies:
+    "@tailwindcss/postcss": "npm:^4.0.0"
     postcss: "npm:^7.0.0"
-    tailwindcss: "npm:^3.2.2"
+    tailwindcss: "npm:^4.0.0"
   peerDependencies:
     tailwindcss: "*"
   languageName: unknown
@@ -32621,39 +32487,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.2.2":
-  version: 3.4.0
-  resolution: "tailwindcss@npm:3.4.0"
-  dependencies:
-    "@alloc/quick-lru": "npm:^5.2.0"
-    arg: "npm:^5.0.2"
-    chokidar: "npm:^3.5.3"
-    didyoumean: "npm:^1.2.2"
-    dlv: "npm:^1.1.3"
-    fast-glob: "npm:^3.3.0"
-    glob-parent: "npm:^6.0.2"
-    is-glob: "npm:^4.0.3"
-    jiti: "npm:^1.19.1"
-    lilconfig: "npm:^2.1.0"
-    micromatch: "npm:^4.0.5"
-    normalize-path: "npm:^3.0.0"
-    object-hash: "npm:^3.0.0"
-    picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.4.23"
-    postcss-import: "npm:^15.1.0"
-    postcss-js: "npm:^4.0.1"
-    postcss-load-config: "npm:^4.0.1"
-    postcss-nested: "npm:^6.0.1"
-    postcss-selector-parser: "npm:^6.0.11"
-    resolve: "npm:^1.22.2"
-    sucrase: "npm:^3.32.0"
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 10c0/0a1cef7468e6d17c2857d0b3c4017af2cb37ed8ba27dfb14780c517b8a74f6786970227c400ac1325fc8bcfc09099d8e990fa7c60924bf945f3d0a912d63f546
-  languageName: node
-  linkType: hard
-
 "tapable@npm:^2.2.0":
   version: 2.2.1
   resolution: "tapable@npm:2.2.1"
@@ -33296,13 +33129,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-interface-checker@npm:^0.1.9":
-  version: 0.1.13
-  resolution: "ts-interface-checker@npm:0.1.13"
-  checksum: 10c0/232509f1b84192d07b81d1e9b9677088e590ac1303436da1e92b296e9be8e31ea042e3e1fd3d29b1742ad2c959e95afe30f63117b8f1bc3a3850070a5142fea7
-  languageName: node
-  linkType: hard
-
 "ts-node@npm:^10.9.2":
   version: 10.9.2
   resolution: "ts-node@npm:10.9.2"
@@ -35457,13 +35283,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.1.1":
-  version: 2.3.1
-  resolution: "yaml@npm:2.3.1"
-  checksum: 10c0/ed4c21a907fb1cd60a25177612fa46d95064a144623d269199817908475fe85bef20fb17406e3bdc175351b6488056a6f84beb7836e8c262646546a0220188e3
-  languageName: node
-  linkType: hard
-
 "yargs-parser@npm:^15.0.1":
   version: 15.0.1
   resolution: "yargs-parser@npm:15.0.1"

From 480d9d3217a74a7c8e62fe5e271b5f620c5595df Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 16:51:29 -0500
Subject: [PATCH 03/17] fix jest resolver

---
 lib/jestResolver.js                                    |  6 ++++--
 .../test/index.test.js                                 | 10 ++++------
 yarn.lock                                              |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lib/jestResolver.js b/lib/jestResolver.js
index 13f6e72265e..7d094b12512 100644
--- a/lib/jestResolver.js
+++ b/lib/jestResolver.js
@@ -44,8 +44,10 @@ module.exports = (request, options) => {
     ...options,
     // https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
     packageFilter: pkg => {
-      delete pkg['exports'];
-      delete pkg['module'];
+      if (!pkg.name?.startsWith('@tailwind') && pkg.name !== 'tailwindcss') {
+        delete pkg['exports'];
+        delete pkg['module'];
+      }
       return pkg;
     }
   });
diff --git a/packages/tailwindcss-react-aria-components/test/index.test.js b/packages/tailwindcss-react-aria-components/test/index.test.js
index 748d1669dad..27c26523160 100644
--- a/packages/tailwindcss-react-aria-components/test/index.test.js
+++ b/packages/tailwindcss-react-aria-components/test/index.test.js
@@ -18,20 +18,19 @@ function run(content) {
 }
 
 test('variants', async () => {
-  return run(css`
+  let result = await run(css`
 @import "tailwindcss/utilities.css" source(none);
 @source "../fixtures/variants.html";
 @plugin "tailwindcss-react-aria-components";
 @theme {
   --color-red: red
 }
-`).then((result) => {
+`);
   expect(result.css).toMatchSnapshot();
 });
-});
 
 test('variants with prefix', async () => {
-  return run(css`
+  let result = await run(css`
 @import "tailwindcss/utilities.css" source(none);
 @source "../fixtures/prefix.html";
 @plugin "tailwindcss-react-aria-components" {
@@ -40,7 +39,6 @@ test('variants with prefix', async () => {
 @theme {
   --color-red: red
 }
-`).then((result) => {
+`);
   expect(result.css).toMatchSnapshot();
 });
-});
diff --git a/yarn.lock b/yarn.lock
index a90d5dbe35e..bf151e2fbcb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -32476,7 +32476,7 @@ __metadata:
     postcss: "npm:^7.0.0"
     tailwindcss: "npm:^4.0.0"
   peerDependencies:
-    tailwindcss: "*"
+    tailwindcss: ^4.0.0
   languageName: unknown
   linkType: soft
 

From 980ac39a6a797eef3d829d9067b5b6d4111e69e0 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 17:42:10 -0500
Subject: [PATCH 04/17] Update tailwind starter

---
 packages/tailwindcss-react-aria-components/package.json | 2 +-
 starters/tailwind/package.json                          | 7 ++++---
 starters/tailwind/src/Checkbox.tsx                      | 2 +-
 starters/tailwind/src/Disclosure.tsx                    | 4 ++--
 starters/tailwind/src/GridList.tsx                      | 2 +-
 starters/tailwind/src/ProgressBar.tsx                   | 2 +-
 starters/tailwind/src/RangeCalendar.tsx                 | 2 +-
 starters/tailwind/src/index.css                         | 4 ++--
 yarn.lock                                               | 2 +-
 9 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/tailwindcss-react-aria-components/package.json b/packages/tailwindcss-react-aria-components/package.json
index e76fb45aad5..f4478df42e9 100644
--- a/packages/tailwindcss-react-aria-components/package.json
+++ b/packages/tailwindcss-react-aria-components/package.json
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.0",
-    "postcss": "^7.0.0",
+    "postcss": "^8.0.0",
     "tailwindcss": "^4.0.0"
   },
   "publishConfig": {
diff --git a/starters/tailwind/package.json b/starters/tailwind/package.json
index 5f131e68e56..6ba636bdbf9 100644
--- a/starters/tailwind/package.json
+++ b/starters/tailwind/package.json
@@ -9,6 +9,7 @@
     "@storybook/react": "^7.5.3",
     "@storybook/react-vite": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.16",
@@ -16,6 +17,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.5.3",
+    "tailwindcss": "^4.0.0",
+    "tailwindcss-animate": "^1.0.7",
     "tailwindcss-react-aria-components": "^1.0.0",
     "typescript": "5.3.3",
     "vite": "^5.0.10"
@@ -28,9 +31,7 @@
     "lucide-react": "^0.292.0",
     "postcss": "^8.4.31",
     "react-aria-components": "latest",
-    "tailwind-variants": "^0.1.18",
-    "tailwindcss": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwind-variants": "^0.1.18"
   },
   "resolutions": {
     "@types/mime": "3.0.4",
diff --git a/starters/tailwind/src/Checkbox.tsx b/starters/tailwind/src/Checkbox.tsx
index 4f629f7f9d2..707808b10a7 100644
--- a/starters/tailwind/src/Checkbox.tsx
+++ b/starters/tailwind/src/Checkbox.tsx
@@ -35,7 +35,7 @@ const checkboxStyles = tv({
 
 const boxStyles = tv({
   extend: focusRing,
-  base: 'w-5 h-5 shrink-0 rounded-xs flex items-center justify-center border-2 transition',
+  base: 'w-5 h-5 shrink-0 rounded-sm flex items-center justify-center border-2 transition',
   variants: {
     isSelected: {
       false: 'bg-white dark:bg-zinc-900 border-(--color) [--color:var(--color-gray-400)] dark:[--color:colors.zinc-400)] group-pressed:[--color:var(--color-gray-500)] dark:group-pressed:[--color:var(--color-zinc-300)]',
diff --git a/starters/tailwind/src/Disclosure.tsx b/starters/tailwind/src/Disclosure.tsx
index 2a55d020d59..fa9b795c4d7 100644
--- a/starters/tailwind/src/Disclosure.tsx
+++ b/starters/tailwind/src/Disclosure.tsx
@@ -17,7 +17,7 @@ import { composeTailwindRenderProps, focusRing } from "./utils";
 import { DisclosureGroupStateContext } from "react-aria-components";
 
 const disclosure = tv({
-  base: "group min-w-64 border dark:border-zinc-600 rounded-lg text-gray-900 dark:text-zinc-200",
+  base: "group min-w-64 border border-gray-200 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-zinc-200",
   variants: {
     isInGroup: {
       true: "border-0 border-b last:border-b-0 rounded-b-none last:rounded-b-lg",
@@ -108,7 +108,7 @@ export interface DisclosureGroupProps extends AriaDisclosureGroupProps {
 
 export function DisclosureGroup({ children, ...props }: DisclosureGroupProps) {
   return (
-    <AriaDisclosureGroup {...props} className={composeTailwindRenderProps(props.className, 'border dark:border-zinc-600 rounded-lg')}>
+    <AriaDisclosureGroup {...props} className={composeTailwindRenderProps(props.className, 'border border-gray-200 dark:border-zinc-600 rounded-lg')}>
       {children}
     </AriaDisclosureGroup>
   );
diff --git a/starters/tailwind/src/GridList.tsx b/starters/tailwind/src/GridList.tsx
index 9efdc6ed2bb..299833bb4fc 100644
--- a/starters/tailwind/src/GridList.tsx
+++ b/starters/tailwind/src/GridList.tsx
@@ -14,7 +14,7 @@ export function GridList<T extends object>(
   { children, ...props }: GridListProps<T>
 ) {
   return (
-    <AriaGridList {...props} className={composeTailwindRenderProps(props.className, 'overflow-auto relative border dark:border-zinc-600 rounded-lg')}>
+    <AriaGridList {...props} className={composeTailwindRenderProps(props.className, 'overflow-auto relative border border-gray-200 dark:border-zinc-600 rounded-lg')}>
       {children}
     </AriaGridList>
   );
diff --git a/starters/tailwind/src/ProgressBar.tsx b/starters/tailwind/src/ProgressBar.tsx
index 992a7cd7f99..82f9c06711a 100644
--- a/starters/tailwind/src/ProgressBar.tsx
+++ b/starters/tailwind/src/ProgressBar.tsx
@@ -20,7 +20,7 @@ export function ProgressBar({ label, ...props }: ProgressBarProps) {
             <span className="text-sm text-gray-600 dark:text-zinc-400">{valueText}</span>
           </div>
           <div className="w-64 h-2 rounded-full bg-gray-300 dark:bg-zinc-700 outline outline-1 -outline-offset-1 outline-transparent relative overflow-hidden">
-            <div className={`absolute top-0 h-full rounded-full bg-blue-600 dark:bg-blue-500 forced-colors:bg-[Highlight] ${isIndeterminate ? 'left-full animate-in duration-1000 [--tw-enter-translate-x:calc(-16rem-100%)] slide-out-to-right-full repeat-infinite ease-out' : 'left-0'}`} style={{ width: (isIndeterminate ? 40 : percentage) + '%' }} />
+            <div className={`absolute top-0 h-full rounded-full bg-blue-600 dark:bg-blue-500 forced-colors:bg-[Highlight] ${isIndeterminate ? 'left-full animate-in duration-1000 slide-in-from-left-[20rem] repeat-infinite ease-out' : 'left-0'}`} style={{ width: (isIndeterminate ? 40 : percentage) + '%' }} />
           </div>
         </>
       )}
diff --git a/starters/tailwind/src/RangeCalendar.tsx b/starters/tailwind/src/RangeCalendar.tsx
index c95e355ff41..7c43c24b3f0 100644
--- a/starters/tailwind/src/RangeCalendar.tsx
+++ b/starters/tailwind/src/RangeCalendar.tsx
@@ -42,7 +42,7 @@ export function RangeCalendar<T extends DateValue>(
   return (
     <AriaRangeCalendar {...props}>
       <CalendarHeader />
-      <CalendarGrid className="[&_td]:px-0">
+      <CalendarGrid className="[&_td]:px-0 [&_td]:py-px">
         <CalendarGridHeader />
         <CalendarGridBody>
           {(date) => <CalendarCell date={date} className="group w-9 h-9 text-sm outline outline-0 cursor-default outside-month:text-gray-300 selected:bg-blue-100 dark:selected:bg-blue-700/30 forced-colors:selected:bg-[Highlight] invalid:selected:bg-red-100 dark:invalid:selected:bg-red-700/30 forced-colors:invalid:selected:bg-[Mark] [td:first-child_&]:rounded-s-full selection-start:rounded-s-full [td:last-child_&]:rounded-e-full selection-end:rounded-e-full">
diff --git a/starters/tailwind/src/index.css b/starters/tailwind/src/index.css
index 85c889ff1a1..660c03d7239 100644
--- a/starters/tailwind/src/index.css
+++ b/starters/tailwind/src/index.css
@@ -1,6 +1,6 @@
 @import 'tailwindcss';
-
-@config '../tailwind.config.js';
+@plugin 'tailwindcss-react-aria-components';
+@plugin 'tailwindcss-animate';
 
 /* Scale up hit targets on high resolution mobile devices. */
 @media (min-resolution: 200dpi) {
diff --git a/yarn.lock b/yarn.lock
index bf151e2fbcb..3b6c665e1b1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -32473,7 +32473,7 @@ __metadata:
   resolution: "tailwindcss-react-aria-components@workspace:packages/tailwindcss-react-aria-components"
   dependencies:
     "@tailwindcss/postcss": "npm:^4.0.0"
-    postcss: "npm:^7.0.0"
+    postcss: "npm:^8.0.0"
     tailwindcss: "npm:^4.0.0"
   peerDependencies:
     tailwindcss: ^4.0.0

From c14cba7eb916281399e8d934028966b29bce657e Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 17:50:00 -0500
Subject: [PATCH 05/17] Update rac-tailwind example app

---
 examples/rac-tailwind/package.json  |  5 +++--
 examples/rac-tailwind/src/App.js    | 14 +++++++-------
 examples/rac-tailwind/src/style.css |  5 ++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/examples/rac-tailwind/package.json b/examples/rac-tailwind/package.json
index 722cf5ea8cb..dc4c1a444f0 100644
--- 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/App.js b/examples/rac-tailwind/src/App.js
index f0482c482c8..eaa3055629a 100644
--- a/examples/rac-tailwind/src/App.js
+++ b/examples/rac-tailwind/src/App.js
@@ -64,7 +64,7 @@ function MyMenuItem(props) {
 }
 
 function OverlayButton(props) {
-  return <Button {...props} className="inline-flex items-center justify-center rounded-md bg-black bg-opacity-20 bg-clip-padding border border-white/20 px-3.5 py-2 sm:text-sm font-medium text-white data-hovered:bg-opacity-30 data-pressed:bg-opacity-40 transition-colors cursor-default outline-hidden data-focus-visible:ring-2 data-focus-visible:ring-white/75" />;
+  return <Button {...props} className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 sm:text-sm font-medium text-white data-hovered:bg-black/30 data-pressed:bg-black/40 transition-colors cursor-default outline-hidden data-focus-visible:ring-2 data-focus-visible:ring-white/75" />;
 }
 
 function SelectExample() {
@@ -72,7 +72,7 @@ function SelectExample() {
     <div className="bg-linear-to-r from-amber-500 to-rose-500 p-8 rounded-lg flex justify-center">
       <Select className="flex flex-col gap-1 w-5/6">
         <Label className="text-sm">Favorite Animal</Label>
-        <Button className="flex relative w-full cursor-default rounded-lg bg-white bg-white bg-opacity-90 data-pressed:bg-opacity-100 transition py-2 pl-3 pr-2 text-left shadow-md text-gray-700 focus:outline-hidden data-focus-visible:border-indigo-500 data-focus-visible:ring-2 data-focus-visible:ring-black sm:text-sm">
+        <Button className="flex relative w-full cursor-default rounded-lg bg-white bg-white/90 data-pressed:bg-white transition py-2 pl-3 pr-2 text-left shadow-md text-gray-700 focus:outline-hidden data-focus-visible:border-indigo-500 data-focus-visible:ring-2 data-focus-visible:ring-black sm:text-sm">
           <SelectValue className="flex-1 truncate data-placeholder:italic" />
           <ChevronUpDownIcon
             className="h-5 w-5 text-gray-500"
@@ -120,7 +120,7 @@ function ComboBoxExample() {
     <div className="bg-linear-to-r from-sky-400 to-cyan-400 p-8 rounded-lg flex justify-center">
       <ComboBox className="flex flex-col gap-1 w-5/6">
         <Label className="text-sm text-black">Favorite Animal</Label>
-        <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white bg-opacity-90 focus-within:bg-opacity-100 transition text-left shadow-md [&:has([data-focus-visible])]:ring-2 [&:has([data-focus-visible])]:ring-black sm:text-sm">
+        <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white/90 focus-within:bg-white transition text-left shadow-md [&:has([data-focus-visible])]:ring-2 [&:has([data-focus-visible])]:ring-black sm:text-sm">
           <Input className="w-full border-none py-2 pl-3 pr-10 sm:text-sm leading-5 text-gray-900 bg-transparent outline-hidden" />
           <Button className="absolute inset-y-0 right-0 flex items-center px-2 cursor-default transition border-l border-l-sky-200 data-pressed:bg-sky-100">
             <ChevronUpDownIcon
@@ -248,7 +248,7 @@ function ModalExample() {
       <DialogTrigger>
         <OverlayButton>Open dialog</OverlayButton>
         <ModalOverlay className={({isEntering, isExiting}) => `
-          fixed inset-0 z-10 overflow-y-auto bg-black bg-opacity-25 flex min-h-full items-center justify-center p-4 text-center backdrop-blur
+          fixed inset-0 z-10 overflow-y-auto bg-black/25 flex min-h-full items-center justify-center p-4 text-center backdrop-blur
           ${isEntering ? 'animate-in fade-in duration-300 ease-out fill-mode-forwards' : ''}
           ${isExiting ? 'animate-out fade-out duration-200 ease-in fill-mode-forwards' : ''}
         `}>
@@ -364,7 +364,7 @@ function SliderExample() {
         </div>
         <SliderTrack className="relative w-full h-7">
           {({state}) => <>
-            <div className="absolute h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white bg-opacity-40" />
+            <div className="absolute h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white/40" />
             <div className="absolute h-2 top-[50%] transform translate-y-[-50%] rounded-full bg-white" style={{width: state.getThumbPercent(0) * 100 + '%'}} />
             <SliderThumb className="h-7 w-7 top-[50%] rounded-full border border-purple-800/75 bg-white transition-colors data-dragging:bg-purple-100 outline-hidden data-focus-visible:ring-2 data-focus-visible:ring-black" />
           </>}
@@ -383,7 +383,7 @@ function ProgressBarExample() {
             <Label className="flex-1">Loading…</Label>
             <span>{valueText}</span>
           </div>
-          <div className="h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white bg-opacity-40">
+          <div className="h-2 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-white/40">
             <div className="absolute h-2 top-[50%] transform translate-y-[-50%] rounded-full bg-white" style={{width: percentage + '%'}} />
           </div>
         </>}
@@ -558,7 +558,7 @@ function AutocompleteExample() {
       <Autocomplete filter={contains} className="flex flex-col gap-1 w-5/6">
         <SearchField>
           <Label className="text-sm text-black">Contacts</Label>
-          <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white bg-opacity-90 focus-within:bg-opacity-100 transition text-left shadow-md [&:has([data-focus-visible])]:ring-2 [&:has([data-focus-visible])]:ring-black sm:text-sm">
+          <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white/90 focus-within:bg-white transition text-left shadow-md [&:has([data-focus-visible])]:ring-2 [&:has([data-focus-visible])]:ring-black sm:text-sm">
             <Input className="w-full border-none py-2 pl-3 pr-2 sm:text-sm leading-5 text-gray-900 bg-transparent outline-hidden" />
           </div>
         </SearchField>
diff --git a/examples/rac-tailwind/src/style.css b/examples/rac-tailwind/src/style.css
index a10f9c9f9ad..d4a0d73eba2 100644
--- a/examples/rac-tailwind/src/style.css
+++ b/examples/rac-tailwind/src/style.css
@@ -1,6 +1,5 @@
-@import 'tailwindcss';
-
-@config '../tailwind.config.js';
+@import 'tailwindcss' source("./");
+@plugin 'tailwindcss-animate';
 
 * {
   -webkit-tap-highlight-color: transparent;

From 46eec9ed76219791642252f39363bb08368432c1 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 17:58:17 -0500
Subject: [PATCH 06/17] Update rac-spectrum-tailwind example

---
 examples/rac-spectrum-tailwind/package.json  | 5 +++--
 examples/rac-spectrum-tailwind/src/style.css | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/rac-spectrum-tailwind/package.json b/examples/rac-spectrum-tailwind/package.json
index 744d53bf0fa..306f345637b 100644
--- 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/style.css b/examples/rac-spectrum-tailwind/src/style.css
index a10f9c9f9ad..a6d617bf484 100644
--- a/examples/rac-spectrum-tailwind/src/style.css
+++ b/examples/rac-spectrum-tailwind/src/style.css
@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import 'tailwindcss' source("./");
 
 @config '../tailwind.config.js';
 

From c3124187cdba349bb41b1bd4befb360b19356b2e Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 17:59:03 -0500
Subject: [PATCH 07/17] enable verdaccio build

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 6e273f4d264..b696c010ab1 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -647,9 +647,9 @@ workflows:
           requires:
             - install
       - docs-verdaccio:
-          filters:
-            branches:
-              only: main
+          # filters:
+          #   branches:
+          #     only: main
           requires:
             - install
       - deploy:

From 2ac68bfbadf18fe501c464940cd3cfc7ef44e2f9 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 18:08:57 -0500
Subject: [PATCH 08/17] update tailwind-variants

---
 package.json                   |  2 +-
 starters/tailwind/package.json |  2 +-
 yarn.lock                      | 20 ++++++++++----------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 839b4e244d0..5bedb8f7b91 100644
--- a/package.json
+++ b/package.json
@@ -202,7 +202,7 @@
     "storybook": "^7.6.19",
     "storybook-dark-mode": "^3.0.3",
     "storybook-react-parcel": "^0.0.1",
-    "tailwind-variants": "^0.1.18",
+    "tailwind-variants": "^0.3.1",
     "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
diff --git a/starters/tailwind/package.json b/starters/tailwind/package.json
index 6ba636bdbf9..6f6527e0397 100644
--- a/starters/tailwind/package.json
+++ b/starters/tailwind/package.json
@@ -31,7 +31,7 @@
     "lucide-react": "^0.292.0",
     "postcss": "^8.4.31",
     "react-aria-components": "latest",
-    "tailwind-variants": "^0.1.18"
+    "tailwind-variants": "^0.3.1"
   },
   "resolutions": {
     "@types/mime": "3.0.4",
diff --git a/yarn.lock b/yarn.lock
index 3b6c665e1b1..cc2e1dae104 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29525,7 +29525,7 @@ __metadata:
     storybook: "npm:^7.6.19"
     storybook-dark-mode: "npm:^3.0.3"
     storybook-react-parcel: "npm:^0.0.1"
-    tailwind-variants: "npm:^0.1.18"
+    tailwind-variants: "npm:^0.3.1"
     tailwindcss: "npm:^4.0.0"
     tailwindcss-animate: "npm:^1.0.7"
     tempy: "npm:^0.5.0"
@@ -32441,21 +32441,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwind-merge@npm:^1.14.0":
-  version: 1.14.0
-  resolution: "tailwind-merge@npm:1.14.0"
-  checksum: 10c0/a66f5ab1a2bb2b0f5a40a031867a6bc900de98eb3339b2a51759351221527a3d600eecb6cb5a038830aa89548eba72bb63aa3856cb9f31c9a3918b42eb3df350
+"tailwind-merge@npm:2.5.4":
+  version: 2.5.4
+  resolution: "tailwind-merge@npm:2.5.4"
+  checksum: 10c0/6c3d2a1d44344f373859f005e6366f0dbd7f66131d330a51dbe823dab08f71c388b2efcbb2b6a2170ca469581d27079c25cd40c234ca1356c4893ae99c2febb3
   languageName: node
   linkType: hard
 
-"tailwind-variants@npm:^0.1.18":
-  version: 0.1.18
-  resolution: "tailwind-variants@npm:0.1.18"
+"tailwind-variants@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "tailwind-variants@npm:0.3.1"
   dependencies:
-    tailwind-merge: "npm:^1.14.0"
+    tailwind-merge: "npm:2.5.4"
   peerDependencies:
     tailwindcss: "*"
-  checksum: 10c0/d73fcc386b75fecd6c8f5b65e0c1106b2939421b952f1a7d41dd42a3e4e3a3b63d8c2380bf8499c069e95b2aca5538e9ccc381ba885ecd123e7b4f00cc97cf61
+  checksum: 10c0/2ad4a9282ea3d9b66443329ede844bd86b6737b98ede3f31d6b495e3d1f210677c57ba360af2dbffede00cce0026dd1105eeb1af936e825ebd14e715eb6cbc11
   languageName: node
   linkType: hard
 

From ffcf78d182816782d8c9a1ce9f91f397e491e900 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 18:17:30 -0500
Subject: [PATCH 09/17] patch

---
 ...ilwind-variants-npm-0.3.1-48888516de.patch | 19 +++++++++++++++++++
 package.json                                  |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 .yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch

diff --git a/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch b/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch
new file mode 100644
index 00000000000..63ede244385
--- /dev/null
+++ 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/package.json b/package.json
index 5bedb8f7b91..9c0f0a23b83 100644
--- a/package.json
+++ b/package.json
@@ -202,7 +202,7 @@
     "storybook": "^7.6.19",
     "storybook-dark-mode": "^3.0.3",
     "storybook-react-parcel": "^0.0.1",
-    "tailwind-variants": "^0.3.1",
+    "tailwind-variants": "patch:tailwind-variants@npm%3A0.3.1#~/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch",
     "tailwindcss": "^4.0.0",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",

From d3d6cced2aaf09a1dbe8c0140e5efdaf33432253 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 18:23:11 -0500
Subject: [PATCH 10/17] update lockfile

---
 yarn.lock | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index cc2e1dae104..21e6deec950 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29525,7 +29525,7 @@ __metadata:
     storybook: "npm:^7.6.19"
     storybook-dark-mode: "npm:^3.0.3"
     storybook-react-parcel: "npm:^0.0.1"
-    tailwind-variants: "npm:^0.3.1"
+    tailwind-variants: "patch:tailwind-variants@npm%3A0.3.1#~/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch"
     tailwindcss: "npm:^4.0.0"
     tailwindcss-animate: "npm:^1.0.7"
     tempy: "npm:^0.5.0"
@@ -32448,7 +32448,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwind-variants@npm:^0.3.1":
+"tailwind-variants@npm:0.3.1":
   version: 0.3.1
   resolution: "tailwind-variants@npm:0.3.1"
   dependencies:
@@ -32459,6 +32459,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-variants@patch:tailwind-variants@npm%3A0.3.1#~/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch":
+  version: 0.3.1
+  resolution: "tailwind-variants@patch:tailwind-variants@npm%3A0.3.1#~/.yarn/patches/tailwind-variants-npm-0.3.1-48888516de.patch::version=0.3.1&hash=946de4"
+  dependencies:
+    tailwind-merge: "npm:2.5.4"
+  peerDependencies:
+    tailwindcss: "*"
+  checksum: 10c0/8a28601bd9fffc24fe385ba1b32704ca7e5fc1da801dff826338cdfa1ee64099c388c7dd11d0156dec2ae690c72c9407a2c0ab9acb358d0481060db900945da0
+  languageName: node
+  linkType: hard
+
 "tailwindcss-animate@npm:^1.0.7":
   version: 1.0.7
   resolution: "tailwindcss-animate@npm:1.0.7"

From 57bcefe62ccc177a5d131024c667e050624027d6 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 18:24:14 -0500
Subject: [PATCH 11/17] missing dependency

---
 package.json            | 1 +
 scripts/buildWebsite.js | 1 +
 yarn.lock               | 1 +
 3 files changed, 3 insertions(+)

diff --git a/package.json b/package.json
index 9c0f0a23b83..8b895e76673 100644
--- a/package.json
+++ b/package.json
@@ -122,6 +122,7 @@
     "@stylistic/eslint-plugin-ts": "^2.9.0",
     "@swc/core": "^1.3.36",
     "@swc/jest": "^0.2.36",
+    "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^15.0.7",
diff --git a/scripts/buildWebsite.js b/scripts/buildWebsite.js
index ab5c6d4998d..55ef5b14174 100644
--- a/scripts/buildWebsite.js
+++ b/scripts/buildWebsite.js
@@ -55,6 +55,7 @@ async function build() {
           name === 'framer-motion' ||
           name === 'tailwindcss-animate' ||
           name === 'tailwindcss' ||
+          name === '@tailwindcss/postcss' ||
           name === 'autoprefixer' ||
           name === 'lucide-react' ||
           name === 'tailwind-variants' ||
diff --git a/yarn.lock b/yarn.lock
index 21e6deec950..43346ce057d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29445,6 +29445,7 @@ __metadata:
     "@stylistic/eslint-plugin-ts": "npm:^2.9.0"
     "@swc/core": "npm:^1.3.36"
     "@swc/jest": "npm:^0.2.36"
+    "@tailwindcss/postcss": "npm:^4.0.0"
     "@testing-library/dom": "npm:^10.1.0"
     "@testing-library/jest-dom": "npm:^5.16.5"
     "@testing-library/react": "npm:^15.0.7"

From 8786738a91525b59a1356b3fcce51ed1f07a2952 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 18:39:16 -0500
Subject: [PATCH 12/17] copy patches when building website

---
 scripts/buildWebsite.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/buildWebsite.js b/scripts/buildWebsite.js
index 55ef5b14174..1eb1fc10bcc 100644
--- a/scripts/buildWebsite.js
+++ b/scripts/buildWebsite.js
@@ -136,6 +136,7 @@ async function build() {
   fs.copySync(path.join(__dirname, '..', 'starters'), path.join(dir, 'starters'));
   fs.copySync(path.join(__dirname, '..', '.yarn', 'releases'), path.join(dir, '.yarn', 'releases'));
   fs.copySync(path.join(__dirname, '..', '.yarn', 'plugins'), path.join(dir, '.yarn', 'plugins'));
+  fs.copySync(path.join(__dirname, '..', '.yarn', 'patches'), path.join(dir, '.yarn', 'patches'));
   fs.copySync(path.join(__dirname, '..', '.yarnrc.yml'), path.join(dir, '.yarnrc.yml'));
   fs.copySync(path.join(__dirname, '..', 'scripts', 'createFeed.mjs'), path.join(dir, 'scripts', 'createFeed.mjs'));
 

From 54b9def65f892787723785b4e2b55ba6542f0fd2 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 24 Jan 2025 19:57:05 -0500
Subject: [PATCH 13/17] dedupe lightningcss

---
 yarn.lock | 112 +-----------------------------------------------------
 1 file changed, 1 insertion(+), 111 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 43346ce057d..7e43f1e8063 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23512,13 +23512,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-darwin-arm64@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-darwin-arm64@npm:1.28.2"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "lightningcss-darwin-arm64@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-darwin-arm64@npm:1.29.1"
@@ -23526,13 +23519,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-darwin-x64@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-darwin-x64@npm:1.28.2"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "lightningcss-darwin-x64@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-darwin-x64@npm:1.29.1"
@@ -23540,13 +23526,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-freebsd-x64@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-freebsd-x64@npm:1.28.2"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "lightningcss-freebsd-x64@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-freebsd-x64@npm:1.29.1"
@@ -23554,13 +23533,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm-gnueabihf@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.28.2"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-arm-gnueabihf@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.1"
@@ -23568,13 +23540,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm64-gnu@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-linux-arm64-gnu@npm:1.28.2"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-arm64-gnu@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-linux-arm64-gnu@npm:1.29.1"
@@ -23582,13 +23547,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-arm64-musl@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-linux-arm64-musl@npm:1.28.2"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-arm64-musl@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-linux-arm64-musl@npm:1.29.1"
@@ -23596,13 +23554,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-x64-gnu@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-linux-x64-gnu@npm:1.28.2"
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-x64-gnu@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-linux-x64-gnu@npm:1.29.1"
@@ -23610,13 +23561,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-linux-x64-musl@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-linux-x64-musl@npm:1.28.2"
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "lightningcss-linux-x64-musl@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-linux-x64-musl@npm:1.29.1"
@@ -23624,13 +23568,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-win32-arm64-msvc@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-win32-arm64-msvc@npm:1.28.2"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "lightningcss-win32-arm64-msvc@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-win32-arm64-msvc@npm:1.29.1"
@@ -23638,13 +23575,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss-win32-x64-msvc@npm:1.28.2":
-  version: 1.28.2
-  resolution: "lightningcss-win32-x64-msvc@npm:1.28.2"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "lightningcss-win32-x64-msvc@npm:1.29.1":
   version: 1.29.1
   resolution: "lightningcss-win32-x64-msvc@npm:1.29.1"
@@ -23652,47 +23582,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lightningcss@npm:^1.22.1":
-  version: 1.28.2
-  resolution: "lightningcss@npm:1.28.2"
-  dependencies:
-    detect-libc: "npm:^1.0.3"
-    lightningcss-darwin-arm64: "npm:1.28.2"
-    lightningcss-darwin-x64: "npm:1.28.2"
-    lightningcss-freebsd-x64: "npm:1.28.2"
-    lightningcss-linux-arm-gnueabihf: "npm:1.28.2"
-    lightningcss-linux-arm64-gnu: "npm:1.28.2"
-    lightningcss-linux-arm64-musl: "npm:1.28.2"
-    lightningcss-linux-x64-gnu: "npm:1.28.2"
-    lightningcss-linux-x64-musl: "npm:1.28.2"
-    lightningcss-win32-arm64-msvc: "npm:1.28.2"
-    lightningcss-win32-x64-msvc: "npm:1.28.2"
-  dependenciesMeta:
-    lightningcss-darwin-arm64:
-      optional: true
-    lightningcss-darwin-x64:
-      optional: true
-    lightningcss-freebsd-x64:
-      optional: true
-    lightningcss-linux-arm-gnueabihf:
-      optional: true
-    lightningcss-linux-arm64-gnu:
-      optional: true
-    lightningcss-linux-arm64-musl:
-      optional: true
-    lightningcss-linux-x64-gnu:
-      optional: true
-    lightningcss-linux-x64-musl:
-      optional: true
-    lightningcss-win32-arm64-msvc:
-      optional: true
-    lightningcss-win32-x64-msvc:
-      optional: true
-  checksum: 10c0/3318770bc7cce1d18acd219ea1e988456b6a5f90a4c09cf12c9ef39c5d4fafff9ba18e798f828131c6d9ece9ae8d544de670becb226ed16e243353c88abc9b41
-  languageName: node
-  linkType: hard
-
-"lightningcss@npm:^1.29.1":
+"lightningcss@npm:^1.22.1, lightningcss@npm:^1.29.1":
   version: 1.29.1
   resolution: "lightningcss@npm:1.29.1"
   dependencies:

From 8674f2f8f05d8a833bd07d79a74fc8c93326f1a3 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 27 Jan 2025 10:28:35 -0500
Subject: [PATCH 14/17] Update styling page

---
 .../react-aria-components/docs/styling.mdx    | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/react-aria-components/docs/styling.mdx b/packages/react-aria-components/docs/styling.mdx
index cb7f3e92c8d..48694320008 100644
--- a/packages/react-aria-components/docs/styling.mdx
+++ b/packages/react-aria-components/docs/styling.mdx
@@ -7,6 +7,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License. */}
 
+import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
+
 import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
@@ -178,17 +180,31 @@ A Tailwind CSS plugin is also available to make styling states of React Aria Com
 yarn add tailwindcss-react-aria-components
 ```
 
-Then add the plugin to your `tailwind.config.js` file:
+When using Tailwind v4, add it to your CSS:
 
-```jsx
+```css render=false
+@import "tailwindcss";
+@plugin "tailwindcss-react-aria-components";
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold', paddingBottom: 8}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, install `tailwindcss-react-aria-components` version 1.x instead of 2.x, and add the plugin to your `tailwind.config.js` instead:
+
+```tsx
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  // ...
   plugins: [
     require('tailwindcss-react-aria-components')
   ]
 };
 ```
 
+</details>
+
 With the plugin installed, you can now access all states without the `data-` prefix. If you have the [Tailwind VSCode Extension](https://tailwindcss.com/docs/editor-setup#intelli-sense-for-vs-code) installed, you'll also get autocomplete for all states in your editor.
 
 ```jsx
@@ -221,6 +237,16 @@ Non-boolean states follow the `{name}-{value}` pattern, so you can style an elem
 
 By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS that automatically handles both React Aria Components and native CSS pseudo classes when the names conflict. If you prefer, you can optionally prefix all React Aria Components modifiers with a string of your choice.
 
+```css render=false
+@plugin "tailwindcss-react-aria-components" { prefix: rac };
+```
+
+<details>
+
+<summary style={{fontWeight: 'bold', paddingBottom: 8}}><ChevronRight size="S" /> Tailwind v3</summary>
+
+When using Tailwind v3, pass the prefix option to the plugin in `tailwind.config.js`:
+
 ```jsx
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -230,6 +256,8 @@ module.exports = {
 };
 ```
 
+</details>
+
 With this configured, all states for React Aria Components can be accessed with that prefix.
 
 ```jsx

From 745bb8df4bf2a273c09b57744ec92be489793f22 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 28 Jan 2025 12:01:31 -0500
Subject: [PATCH 15/17] Fix TextField focus state

---
 starters/tailwind/src/TextField.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/starters/tailwind/src/TextField.tsx b/starters/tailwind/src/TextField.tsx
index cd57daf85bb..cea9f5e986a 100644
--- a/starters/tailwind/src/TextField.tsx
+++ b/starters/tailwind/src/TextField.tsx
@@ -13,7 +13,8 @@ const inputStyles = tv({
   base: 'border-2 rounded-md',
   variants: {
     isFocused: fieldBorderStyles.variants.isFocusWithin,
-    ...fieldBorderStyles.variants,
+    isInvalid: fieldBorderStyles.variants.isInvalid,
+    isDisabled: fieldBorderStyles.variants.isDisabled
   }
 });
 

From 68f804b3add37c2c83f4ea979dcfda1390d6252a Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 28 Jan 2025 12:01:50 -0500
Subject: [PATCH 16/17] revert verdaccio

---
 .circleci/config.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index b696c010ab1..6e273f4d264 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -647,9 +647,9 @@ workflows:
           requires:
             - install
       - docs-verdaccio:
-          # filters:
-          #   branches:
-          #     only: main
+          filters:
+            branches:
+              only: main
           requires:
             - install
       - deploy:

From 5a6d131894024d9aaf1c67ed3bdbc0fb13ad55da Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Tue, 28 Jan 2025 12:34:51 -0500
Subject: [PATCH 17/17] fix typo

---
 packages/dev/docs/pages/react-aria/components.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev/docs/pages/react-aria/components.mdx b/packages/dev/docs/pages/react-aria/components.mdx
index cbaef607044..d16f953fa8b 100644
--- a/packages/dev/docs/pages/react-aria/components.mdx
+++ b/packages/dev/docs/pages/react-aria/components.mdx
@@ -500,7 +500,7 @@ order: 5
 <ExampleCard
   url="useFocusRing.html"
   title="useFocusRing"
-  description="A focus ring-3 is an indication of the active element when interacting with a keyboard.">
+  description="A focus ring is an indication of the active element when interacting with a keyboard.">
   <FocusRing />
 </ExampleCard>