From 562b59dd10ca1e890076ac033f59ceb45eead67c Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Thu, 31 Aug 2023 17:38:03 -0500
Subject: [PATCH 1/2] remove plugin from template

---
 .../rac-spectrum-tailwind/src/rac-plugin.js   | 58 -------------------
 1 file changed, 58 deletions(-)
 delete mode 100644 examples/rac-spectrum-tailwind/src/rac-plugin.js

diff --git a/examples/rac-spectrum-tailwind/src/rac-plugin.js b/examples/rac-spectrum-tailwind/src/rac-plugin.js
deleted file mode 100644
index 46e750a824e..00000000000
--- a/examples/rac-spectrum-tailwind/src/rac-plugin.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import plugin from "tailwindcss/plugin";
-
-const attributes = {
-  boolean: {
-    data: [
-      "hovered",
-      "focused",
-      "focus-visible",
-      "pressed",
-      "disabled",
-      "drop-target",
-      "dragging",
-      "empty",
-      "allows-removing",
-      "placeholder",
-      "selected",
-      "indeterminate",
-      "readonly",
-      "required",
-      "entering",
-      "exiting",
-      "open",
-      "unavailable",
-    ],
-    aria: ["sort", "invalid", "current"],
-  },
-  enum: {
-    data: {
-      "validation-state": ["invalid", "valid"],
-      placement: ["left", "right", "top", "bottom"],
-      type: ["literal", "year", "month", "day"],
-      layout: ["grid", "stack"],
-    },
-    aria: {
-      orientation: ["horizontal", "vertical"],
-    },
-  },
-};
-
-module.exports = plugin(({ addVariant }) => {
-  Object.keys(attributes.boolean).forEach((attributePrefix) => {
-    attributes.boolean[attributePrefix].forEach((attributeName) => {
-      let selector = `&[${attributePrefix}-${attributeName}]`;
-      addVariant(attributeName, selector);
-    });
-  });
-  Object.keys(attributes.enum).forEach((attributePrefix) => {
-    Object.keys(attributes.enum[attributePrefix]).forEach((attributeName) => {
-      attributes.enum[attributePrefix][attributeName].forEach(
-        (attributeValue) => {
-          let variantName = `${attributeName}-${attributeValue}`;
-          let selector = `&[${attributePrefix}-${attributeName}]="${attributeValue}"`;
-          addVariant(variantName, selector);
-        }
-      );
-    });
-  });
-});

From 2d71b59dadd9413bdf14980b0ddb02d686368348 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Thu, 31 Aug 2023 17:41:10 -0500
Subject: [PATCH 2/2] cleanup docs

---
 .../react-aria-components/docs/react-aria-components.mdx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-aria-components/docs/react-aria-components.mdx b/packages/react-aria-components/docs/react-aria-components.mdx
index 9dbd328f453..45455e8fb57 100644
--- a/packages/react-aria-components/docs/react-aria-components.mdx
+++ b/packages/react-aria-components/docs/react-aria-components.mdx
@@ -360,6 +360,8 @@ If you're using Tailwind CSS, you can use [ARIA states](https://tailwindcss.com/
 </Item>
 ````
 
+You can also use our Tailwind CSS [plugin](#tailwind-css-plugin) to get shortened modifiers.
+
 In order to ensure high quality interactions across browsers and devices, React Aria Components includes states such as `data-hovered` and `data-pressed` which are similar to CSS pseudo classes such as `:hover` and `:active`, but work consistently between mouse, touch, and keyboard modalities. You can read more about this in our [blog post series](../blog/building-a-button-part-1.html) and our [Interactions](interactions.html) overview.
 
 All of the states and selectors for each component are listed in their respective documentation.
@@ -452,10 +454,10 @@ You can optionally specify a prefix using `require('tailwindcss-react-aria-compo
 
 ### Boolean states
 
-The `data-selected` state can be styled with `selected:` like this:
+The `data-pressed` state can be styled with `pressed:` like this:
 
 ```jsx
-<Button className="selected:bg-blue">
+<Button className="pressed:bg-blue">
   {/* ... */}
 </Button>
 ```