From b8c919e2f613c87a35d26bfe5fea8ccfede1083e Mon Sep 17 00:00:00 2001 From: Travis Cory Date: Fri, 4 Sep 2026 09:36:22 -0700 Subject: [PATCH] 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.