Skip to content

Commit 9255da6

Browse files
authored
Cleanup RAC Tailwind plugin docs (#5011)
1 parent e7b9c16 commit 9255da6

File tree

2 files changed

+4
-60
lines changed

2 files changed

+4
-60
lines changed

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

Lines changed: 0 additions & 58 deletions
This file was deleted.

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -360,6 +360,8 @@ If you're using Tailwind CSS, you can use [ARIA states](https://tailwindcss.com/
360360
</Item>
361361
````
362362

363+
You can also use our Tailwind CSS [plugin](#tailwind-css-plugin) to get shortened modifiers.
364+
363365
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.
364366

365367
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
452454

453455
### Boolean states
454456

455-
The `data-selected` state can be styled with `selected:` like this:
457+
The `data-pressed` state can be styled with `pressed:` like this:
456458

457459
```jsx
458-
<Button className="selected:bg-blue">
460+
<Button className="pressed:bg-blue">
459461
{/* ... */}
460462
</Button>
461463
```

0 commit comments

Comments
 (0)