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); - } - ); - }); - }); -}); 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/ ```` +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 - ```