Skip to content

Cleanup RAC Tailwind plugin docs #5011

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
reidbarber merged 2 commits into from
Sep 1, 2023
Merged

Cleanup RAC Tailwind plugin docs #5011

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
562b59d
remove plugin from template
reidbarber Aug 31, 2023
2d71b59
cleanup docs
reidbarber Aug 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 0 additions & 58 deletions examples/rac-spectrum-tailwind/src/rac-plugin.js
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions packages/react-aria-components/docs/react-aria-components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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>
```
Expand Down