From b8c919e2f613c87a35d26bfe5fea8ccfede1083e Mon Sep 17 00:00:00 2001 From: Travis Cory Date: Fri, 4 Sep 2026 09:36:22 -0700 Subject: [PATCH 1/5] fix: add note about exception based on source code --- packages/dev/s2-docs/pages/react-aria/styling.mdx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/dev/s2-docs/pages/react-aria/styling.mdx b/packages/dev/s2-docs/pages/react-aria/styling.mdx index 3bdcd611096..c0c7e9d46bf 100644 --- a/packages/dev/s2-docs/pages/react-aria/styling.mdx +++ b/packages/dev/s2-docs/pages/react-aria/styling.mdx @@ -210,6 +210,15 @@ Non-boolean states follow the `{name}-{value}` pattern. For example, an element ``` +### Exceptions + +There are a few exceptions to how states with the `data-` prefix are styled in Tailwind: + +* `data-hovered` is styled with `hover:` +* `data-focused` is styled with `focus:` +* `data-readonly` is styled with `read-only:` +* `data-placeholder` is styled with `placeholder-shown:` + ### Modifier prefix By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS that automatically handles both React Aria Components and native CSS pseudo classes when the names conflict. If you prefer, you can optionally prefix all React Aria Components modifiers with a string of your choice. From 13746110359fe6f61645aa2f7492d76fbbdf6a43 Mon Sep 17 00:00:00 2001 From: Travis Cory Date: Tue, 8 Sep 2026 09:20:41 -0700 Subject: [PATCH 2/5] feat: add all states in a disclosure --- .../dev/s2-docs/pages/react-aria/styling.mdx | 71 ++++++++++++++++--- 1 file changed, 63 insertions(+), 8 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/styling.mdx b/packages/dev/s2-docs/pages/react-aria/styling.mdx index c0c7e9d46bf..7e01739cd7a 100644 --- a/packages/dev/s2-docs/pages/react-aria/styling.mdx +++ b/packages/dev/s2-docs/pages/react-aria/styling.mdx @@ -210,18 +210,73 @@ Non-boolean states follow the `{name}-{value}` pattern. For example, an element ``` -### Exceptions -There are a few exceptions to how states with the `data-` prefix are styled in Tailwind: +### Modifier prefix -* `data-hovered` is styled with `hover:` -* `data-focused` is styled with `focus:` -* `data-readonly` is styled with `read-only:` -* `data-placeholder` is styled with `placeholder-shown:` +By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS that automatically handles both React Aria Components and native CSS pseudo classes when the names conflict. -### Modifier prefix + + Mapping of all states and their corresponding Tailwind classes + + +| State | Tailwind Class | +|-------|----------------| +| `data-allows-removing` | `allows-removing:` | +| `data-allows-sorting` | `allows-sorting:` | +| `data-allows-dragging` | `allows-dragging:` | +| `data-has-submenu` | `has-submenu:` | +| `data-has-child-items` | `has-child-items:` | +| `data-open` | `open:` | +| `data-expanded` | `expanded:` | +| `data-entering` | `entering:` | +| `data-exiting` | `exiting:` | +| `data-indeterminate` | `indeterminate:` | +| `data-placeholder` | `placeholder-shown:` | +| `data-current` | `current:` | +| `data-required` | `required:` | +| `data-unavailable` | `unavailable:` | +| `data-invalid` | `invalid:` | +| `data-readonly` | `read-only:` | +| `data-outside-month` | `outside-month:` | +| `data-outside-visible-range` | `outside-visible-range:` | +| `data-pending` | `pending:` | +| `data-empty` | `empty:` | +| `data-focus-within` | `focus-within:` | +| `data-hovered` | `hover:` | +| `data-focused` | `focus:` | +| `data-focus-visible` | `focus-visible:` | +| `data-pressed` | `pressed:` | +| `data-active` | `active:` | +| `data-selected` | `selected:` | +| `data-selection-start` | `selection-start:` | +| `data-selection-end` | `selection-end:` | +| `data-dragging` | `dragging:` | +| `data-drop-target` | `drop-target:` | +| `data-resizing` | `resizing:` | +| `data-disabled` | `disabled:` | +| `data-placement="left"` | `placement-left:` | +| `data-placement="right"` | `placement-right:` | +| `data-placement="top"` | `placement-top:` | +| `data-placement="bottom"` | `placement-bottom:` | +| `data-type="literal"` | `type-literal:` | +| `data-type="year"` | `type-year:` | +| `data-type="month"` | `type-month:` | +| `data-type="day"` | `type-day:` | +| `data-layout="grid"` | `layout-grid:` | +| `data-layout="stack"` | `layout-stack:` | +| `data-orientation="horizontal"` | `orientation-horizontal:` | +| `data-orientation="vertical"` | `orientation-vertical:` | +| `data-selection-mode="single"` | `selection-single:` | +| `data-selection-mode="multiple"` | `selection-multiple:` | +| `data-resizable-direction="right"` | `resizable-right:` | +| `data-resizable-direction="left"` | `resizable-left:` | +| `data-resizable-direction="both"` | `resizable-both:` | +| `data-sort-direction="ascending"` | `sort-ascending:` | +| `data-sort-direction="descending"` | `sort-descending:` | + + -By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS that automatically handles both React Aria Components and native CSS pseudo classes when the names conflict. If you prefer, you can optionally prefix all React Aria Components modifiers with a string of your choice. +If you prefer, you can optionally prefix all React Aria Components modifiers with a string of your choice. ```css @plugin "tailwindcss-react-aria-components" { prefix: rac }; From e396d7b53fe6ced2c9c2a3fb1cd933e4d000e22b Mon Sep 17 00:00:00 2001 From: Travis Cory Date: Mon, 14 Sep 2026 09:46:12 -0700 Subject: [PATCH 3/5] fix: use table --- .../dev/s2-docs/pages/react-aria/styling.mdx | 114 +++++++++--------- 1 file changed, 59 insertions(+), 55 deletions(-) diff --git a/packages/dev/s2-docs/pages/react-aria/styling.mdx b/packages/dev/s2-docs/pages/react-aria/styling.mdx index 7e01739cd7a..a99e0e0a31a 100644 --- a/packages/dev/s2-docs/pages/react-aria/styling.mdx +++ b/packages/dev/s2-docs/pages/react-aria/styling.mdx @@ -3,6 +3,7 @@ import {InstallCommand} from '../../src/InstallCommand'; export default Layout; import {Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/s2'; +import {StaticTable} from '../../src/StaticTable'; export const section = 'Guides'; export const description = 'How to style React Aria components.'; @@ -218,61 +219,64 @@ By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS th Mapping of all states and their corresponding Tailwind classes - -| State | Tailwind Class | -|-------|----------------| -| `data-allows-removing` | `allows-removing:` | -| `data-allows-sorting` | `allows-sorting:` | -| `data-allows-dragging` | `allows-dragging:` | -| `data-has-submenu` | `has-submenu:` | -| `data-has-child-items` | `has-child-items:` | -| `data-open` | `open:` | -| `data-expanded` | `expanded:` | -| `data-entering` | `entering:` | -| `data-exiting` | `exiting:` | -| `data-indeterminate` | `indeterminate:` | -| `data-placeholder` | `placeholder-shown:` | -| `data-current` | `current:` | -| `data-required` | `required:` | -| `data-unavailable` | `unavailable:` | -| `data-invalid` | `invalid:` | -| `data-readonly` | `read-only:` | -| `data-outside-month` | `outside-month:` | -| `data-outside-visible-range` | `outside-visible-range:` | -| `data-pending` | `pending:` | -| `data-empty` | `empty:` | -| `data-focus-within` | `focus-within:` | -| `data-hovered` | `hover:` | -| `data-focused` | `focus:` | -| `data-focus-visible` | `focus-visible:` | -| `data-pressed` | `pressed:` | -| `data-active` | `active:` | -| `data-selected` | `selected:` | -| `data-selection-start` | `selection-start:` | -| `data-selection-end` | `selection-end:` | -| `data-dragging` | `dragging:` | -| `data-drop-target` | `drop-target:` | -| `data-resizing` | `resizing:` | -| `data-disabled` | `disabled:` | -| `data-placement="left"` | `placement-left:` | -| `data-placement="right"` | `placement-right:` | -| `data-placement="top"` | `placement-top:` | -| `data-placement="bottom"` | `placement-bottom:` | -| `data-type="literal"` | `type-literal:` | -| `data-type="year"` | `type-year:` | -| `data-type="month"` | `type-month:` | -| `data-type="day"` | `type-day:` | -| `data-layout="grid"` | `layout-grid:` | -| `data-layout="stack"` | `layout-stack:` | -| `data-orientation="horizontal"` | `orientation-horizontal:` | -| `data-orientation="vertical"` | `orientation-vertical:` | -| `data-selection-mode="single"` | `selection-single:` | -| `data-selection-mode="multiple"` | `selection-multiple:` | -| `data-resizable-direction="right"` | `resizable-right:` | -| `data-resizable-direction="left"` | `resizable-left:` | -| `data-resizable-direction="both"` | `resizable-both:` | -| `data-sort-direction="ascending"` | `sort-ascending:` | -| `data-sort-direction="descending"` | `sort-descending:` | + From 08a29aab8a1b67380b848ad7c28e4c8a74866212 Mon Sep 17 00:00:00 2001 From: Travis Cory Date: Mon, 14 Sep 2026 16:07:10 -0700 Subject: [PATCH 4/5] Update packages/dev/s2-docs/pages/react-aria/styling.mdx Co-authored-by: Rob Snow --- packages/dev/s2-docs/pages/react-aria/styling.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/react-aria/styling.mdx b/packages/dev/s2-docs/pages/react-aria/styling.mdx index a99e0e0a31a..0627171b4cf 100644 --- a/packages/dev/s2-docs/pages/react-aria/styling.mdx +++ b/packages/dev/s2-docs/pages/react-aria/styling.mdx @@ -214,7 +214,7 @@ Non-boolean states follow the `{name}-{value}` pattern. For example, an element ### Modifier prefix -By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS that automatically handles both React Aria Components and native CSS pseudo classes when the names conflict. +By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS that automatically handles both React Aria Components and native CSS pseudo classes when the names conflict. If you prefer, you can optionally prefix all React Aria Components modifiers with a string of your choice. Mapping of all states and their corresponding Tailwind classes From 68d951c41005ac7e6a34a99e2dcfebe18eee684e Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Tue, 15 Sep 2026 09:59:11 +1000 Subject: [PATCH 5/5] Apply suggestion from @snowystinger --- packages/dev/s2-docs/pages/react-aria/styling.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/dev/s2-docs/pages/react-aria/styling.mdx b/packages/dev/s2-docs/pages/react-aria/styling.mdx index 0627171b4cf..06429575e8a 100644 --- a/packages/dev/s2-docs/pages/react-aria/styling.mdx +++ b/packages/dev/s2-docs/pages/react-aria/styling.mdx @@ -280,7 +280,6 @@ By default, all modifiers are unprefixed (e.g. `disabled:`), and generate CSS th -If you prefer, you can optionally prefix all React Aria Components modifiers with a string of your choice. ```css @plugin "tailwindcss-react-aria-components" { prefix: rac };