chore: Tw animate update

examples/rac-spectrum-tailwind/package.json

@@ -19,7 +19,7 @@
     "react-dom": "^18.2.0",
     "react-stately": "latest",
     "tailwindcss": "^4.0.0",
-    "tailwindcss-animate": "^1.0.5"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "process": "^0.11.10"

examples/rac-spectrum-tailwind/src/spectrum-preset.js

@@ -547,5 +547,5 @@ module.exports = {
       4: 'var(--spectrum-global-color-opacity-4)'
     }
   },
-  plugins: [require('tailwindcss-animate')]
+  plugins: []
 };

examples/rac-spectrum-tailwind/src/style.css

@@ -1,6 +1,7 @@
 @import 'tailwindcss' source('./');
 
 @config '../tailwind.config.js';
+@import 'tw-animate-css';
 
 * {
   -webkit-tap-highlight-color: transparent;

examples/rac-spectrum-tailwind/yarn.lock

@@ -6065,7 +6065,7 @@ __metadata:
     react-dom: "npm:^18.2.0"
     react-stately: "npm:latest"
     tailwindcss: "npm:^4.0.0"
-    tailwindcss-animate: "npm:^1.0.5"
+    tw-animate-css: "npm:^1.4.0"
   languageName: unknown
   linkType: soft
 
@@ -6410,15 +6410,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss-animate@npm:^1.0.5":
-  version: 1.0.7
-  resolution: "tailwindcss-animate@npm:1.0.7"
-  peerDependencies:
-    tailwindcss: "*"
-  checksum: 10c0/ec7dbd1631076b97d66a1fbaaa06e0725fccfa63119221e8d87a997b02dcede98ad88bb1ef6665b968f5d260fcefb10592e0299ca70208d365b37761edf5e19a
-  languageName: node
-  linkType: hard
-
 "tailwindcss@npm:4.1.13, tailwindcss@npm:^4.0.0":
   version: 4.1.13
   resolution: "tailwindcss@npm:4.1.13"
@@ -6479,6 +6470,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tw-animate-css@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "tw-animate-css@npm:1.4.0"
+  checksum: 10c0/6cfbc19ccc73883ec80ef1f9147f43e736cb01ee99c8172968b37eb81b720523d30e38b1a96aef92db3c586d864204db5510b51744ddacbbf0ad8e3c7fb56ec7
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.20.2":
   version: 0.20.2
   resolution: "type-fest@npm:0.20.2"

package.json

@@ -199,8 +199,8 @@
     "storybook-react-parcel": "workspace:^",
     "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",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.8.2",
     "unplugin-parcel-macros": "^0.1.1",
     "verdaccio": "^6.0.0",

packages/dev/docs/pages/react-aria/home.global.css

@@ -15,7 +15,7 @@
 @source "home/*.tsx";
 @source "../../../../../starters/tailwind/**/*.{ts,tsx}";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import 'tw-animate-css';
 @import './home/home.css';
 
 @font-face {

packages/dev/s2-docs/pages/react-aria/styling.mdx

@@ -316,7 +316,7 @@ Note that unlike CSS transitions, keyframe animations are not interruptible. If
 
 ### Tailwind
 
-If you are using Tailwind, we recommend using the [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) plugin. This includes utilities for building common animations such as fading, sliding, and zooming.
+If you are using Tailwind v4, we recommend using the [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) library. This includes utilities for building common animations such as fading, sliding, and zooming. (For Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) instead.)
 
 ```jsx
 <Popover className="data-[entering]:animate-in data-[entering]:fade-in data-[exiting]:animate-out data-[exiting]:fade-out">

packages/dev/s2-docs/src/CodeSandbox.tsx

@@ -57,7 +57,7 @@ const devDependencies = {
     '@tailwindcss/postcss': '^4',
     postcss: '^8',
     'tailwindcss-react-aria-components': '^2',
-    'tailwindcss-animate': '^1'
+    'tw-animate-css': '^1'
   },
   s2: {
     '@types/react': '^19',

packages/dev/s2-docs/src/StackBlitz.tsx

@@ -80,7 +80,7 @@ function getFiles(
                   tailwindcss: '^4',
                   '@tailwindcss/vite': '^4',
                   'tailwindcss-react-aria-components': '^2',
-                  'tailwindcss-animate': '^1'
+                  'tw-animate-css': '^1'
                 }
               : {}),
             ...(type === 's2'

packages/dev/s2-docs/tailwind/tailwind.css

@@ -6,7 +6,7 @@
 @source "../pages/react-aria/examples/plants/*.tsx";
 @source "../pages/react-aria/examples/Tab*.tsx";
 @plugin 'tailwindcss-react-aria-components';
-@plugin 'tailwindcss-animate';
+@import 'tw-animate-css';
 @source "../../docs/pages/react-aria/home/*.tsx";
 @import '../../docs/pages/react-aria/home/home.css';
 @source "../src/SearchMenuWrapper.tsx";

packages/react-aria-components/docs/examples/account-menu.mdx

@@ -96,14 +96,14 @@ function MySwitch(props: SwitchProps) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/examples/action-menu.mdx

@@ -72,14 +72,14 @@ function ActionItem(props: MenuItemProps) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/examples/command-palette.mdx

@@ -158,14 +158,14 @@ function CommandItem(props) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/examples/datepicker.mdx

@@ -104,14 +104,14 @@ function MyPopover(props: PopoverProps) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/examples/destructive-dialog.mdx

@@ -93,14 +93,14 @@ function DialogButton({className, ...props}) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/examples/notifications-popover.mdx

@@ -98,14 +98,14 @@ function Notification({avatar, name, time, text}) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/examples/searchable-select.mdx

@@ -144,14 +144,14 @@ function SelectItem(props: ListBoxItemProps & {children: string}) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/examples/status-select.mdx

@@ -107,14 +107,14 @@ function Status({className}: {className: string}) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/examples/tailwind.global.css

@@ -3,5 +3,5 @@
 @import 'tailwindcss/utilities.css' layer(utilities) source(none);
 @source "*.mdx";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import 'tw-animate-css';
 @variant dark (&:where([style*="color-scheme: dark"] *));

packages/react-aria-components/docs/examples/user-combobox.mdx

@@ -145,14 +145,14 @@ function UserItem(props: ListBoxItemProps & {children: React.ReactNode}) {
 This example uses the following plugins:
 
 * [tailwindcss-react-aria-components](../styling.html#plugin)
-* [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+* [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) (Tailwind v4 only — for Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate))
 
 When using Tailwind v4, add them to your CSS:
 
 ```css render=false
 @import "tailwindcss";
 @plugin "tailwindcss-react-aria-components";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 ```
 
 <details>

packages/react-aria-components/docs/styling.mdx

@@ -340,7 +340,7 @@ Note that unlike CSS transitions, keyframe animations are not interruptible. If
 
 ### Tailwind CSS
 
-If you are using Tailwind CSS, we recommend using the [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) plugin. This includes utilities for building common animations such as fading, sliding, and zooming.
+If you are using Tailwind CSS v4, we recommend using the [tw-animate-css](https://github.com/Wombosvideo/tw-animate-css) library. This includes utilities for building common animations such as fading, sliding, and zooming. (For Tailwind v3, use [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate) instead.)
 
 ```jsx
 <Popover className="data-[entering]:animate-in data-[entering]:fade-in data-[exiting]:animate-out data-[exiting]:fade-out">

scripts/buildRegistry.mjs

@@ -30,7 +30,7 @@ for (let file of globSync('starters/tailwind/src/*.{ts,tsx}').sort()) {
     name: `tailwind-${name.toLowerCase()}`,
     type,
     title: name,
-    dependencies: [...dependencies, 'tailwindcss-react-aria-components', 'tailwindcss-animate'],
+    dependencies: [...dependencies, 'tailwindcss-react-aria-components', 'tw-animate-css'],
     registryDependencies: [...registryDependencies],
     files: [
       {
@@ -41,7 +41,7 @@ for (let file of globSync('starters/tailwind/src/*.{ts,tsx}').sort()) {
     ],
     css: {
       '@plugin "tailwindcss-react-aria-components"': {},
-      '@plugin "tailwindcss-animate"': {}
+      '@import "tw-animate-css"': {}
     }
   };
 

scripts/buildWebsite.js

@@ -54,7 +54,7 @@ async function build() {
           name === 'sharp' ||
           name === 'recast' ||
           name === 'motion' ||
-          name === 'tailwindcss-animate' ||
+          name === 'tw-animate-css' ||
           name === 'tailwindcss' ||
           name === '@tailwindcss/postcss' ||
           name === 'autoprefixer' ||

starters/tailwind/package.json

@@ -26,8 +26,8 @@
     "react-dom": "^19.1.0",
     "storybook": "^9.0.18",
     "tailwindcss": "^4.0.0",
-    "tailwindcss-animate": "^1.0.7",
     "tailwindcss-react-aria-components": "^2.0.1",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.8.2",
     "vite": "^5.0.10"
   },

starters/tailwind/src/index.css

@@ -1,6 +1,6 @@
 @import 'tailwindcss';
 @plugin 'tailwindcss-react-aria-components';
-@plugin 'tailwindcss-animate';
+@import 'tw-animate-css';
 
 /* Scale up hit targets on high resolution mobile devices. */
 @media (min-resolution: 200dpi) {