{"id":74172,"date":"2025-10-07T21:00:45","date_gmt":"2025-10-07T13:00:45","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=74172"},"modified":"2025-10-01T16:03:14","modified_gmt":"2025-10-01T08:03:14","slug":"react-aria-tailwindcss-styling","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/react-aria-tailwindcss-styling\/","title":{"rendered":"How to Style React Aria Components with TailwindCSS"},"content":{"rendered":"

React Aria Components<\/a> (RAC) is a library from Adobe that gives you fully accessible, production-ready React components\u2014but without any default styling. This makes RAC perfect for pairing with a styling framework like TailwindCSS, since you can design everything exactly the way you want without fighting against preset styles.<\/p>\n

\n \"React\n <\/figure>\n

I\u2019ve been using RAC in various projects, and one thing that I like about RAC is how it handles the component states. Instead of just using CSS pseudo-classes like :hover<\/code> or :active<\/code> which don\u2019t always behave consistently on touch devices or with keyboards, it uses data-<\/code> attributes like data-hovered<\/code>, data-pressed<\/code>, and data-selected<\/code>.<\/p>\n

Using with TailwindCSS<\/h2>\n

TailwindCSS is one of my favourite ways to style components. While React Aria Components work just well with TailwindCSS, there\u2019s a catch when it comes to styling component states. Because RAC uses data attributes, you can\u2019t just use Tailwind\u2019s usual hover:<\/code> or focus:<\/code> variants. Instead, you need to write out the full attribute using Tailwind\u2019s arbitrary variant syntax, for example:<\/p>\n

\r\n<Button className=\"data-[focused-visible]:bg-blue-400 data-[disabled]:bg-gray-100\" \/>\r\n<\/pre>\n
This works fine but it can be redundant. The class names can quickly get long and messy, which makes our code harder to read and scan. We also lose out on Tailwind\u2019s handy editor autocompletion, so typos become more likely.<\/p>\n
This is exactly the problem that the tailwindcss-react-aria-components<\/a> plugin is built to solve. Let\u2019s see how it works.<\/p>\n
Installation<\/h2>\n
Installing the plugin is simple. We can add it with NPM with this command below:<\/p>\n
\r\nnpm install tailwindcss-react-aria-components\r\n<\/pre>\n
Configuring the plugin will depend on the Tailwind version you\u2019re using on the project.<\/p>\n
On Tailwind v3<\/strong>, add it to your tailwind.config.js<\/code>:<\/p>\n
\r\n\/** @type {import('tailwindcss').Config} *\/\r\nmodule.exports = {\r\n  \/\/...\r\n  plugins: [\r\n    require('tailwindcss-react-aria-components')\r\n  ],\r\n}\r\n<\/pre>\n
On Tailwind v4<\/strong>, use the new @plugin<\/code> directive in your main CSS file:<\/p>\n
\r\n@import \"tailwindcss\";\r\n@plugin \"tailwindcss-react-aria-components\";\r\n<\/pre>\n
Once installed, styling the component is more simplified. Verbose data attributes like data-[pressed]:<\/code> turn into clean variants such as pressed:<\/code>, and data-[selected]:<\/code> becomes selected:<\/code>. Even non-boolean states are shorter, for example data-orientation=\"vertical\"<\/code> now becomes orientation-vertical:<\/code>.<\/p>\n
Here\u2019s a quick comparison of the two approaches for some of the states in RAC:<\/p>\n\n\n\n\n\n\n\n\n\n\n
 RAC State <\/th>\n Tailwind Attribute Selector <\/th>\n Simplified Class Selector <\/th>\n<\/tr>\n<\/thead>\n
\n                    isHovered<\/code>\n                <\/td>\n\n                    data-[hovered]<\/code>\n                <\/td>\n\n                    hovered:<\/code>\n                <\/td>\n<\/tr>\n
\n                    isPressed<\/code>\n                <\/td>\n\n                    data-[pressed]<\/code>\n                <\/td>\n\n                    pressed:<\/code>\n                <\/td>\n<\/tr>\n
\n                    isSelected<\/code>\n                <\/td>\n\n                    data-[selected]<\/code>\n                <\/td>\n\n                    selected:<\/code>\n                <\/td>\n<\/tr>\n
\n                    isDisabled<\/code>\n                <\/td>\n\n                    data-[disabled]<\/code>\n                <\/td>\n\n                    disabled:<\/code>\n                <\/td>\n<\/tr>\n
\n                    isFocusVisible<\/code>\n                <\/td>\n\n                    data-[focus-visible]<\/code>\n                <\/td>\n\n                    focus-visible:<\/code>\n                <\/td>\n<\/tr>\n
\n                    isPending<\/code>\n                <\/td>\n\n                    data-[pending]<\/code>\n                <\/td>\n\n                    pending:<\/code>\n                <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Prefixing<\/h2>\n
By default, the plugin\u2019s modifiers are unprefixed, so you can use variants like disabled:<\/code> right away, for example:<\/p>\n
\r\nimport { Button } from 'react-aria-components';\r\n\r\nfunction App() {\r\n    return (\r\n        <Button className=\"disabled:opacity-50\" isDisabled>\r\n            Submit\r\n        <\/Button>\r\n    );\r\n}\r\n<\/pre>\n
But if you prefer a clearer naming convention, you can set a prefix in the config. This can be especially handy in larger projects where you want to avoid clashes with other plugins or custom utilities. <\/p>\n
Again, the setup will depend on the Tailwind version you\u2019re using.<\/p>\n
On Tailwind v3<\/strong>, you can add the prefix option when requiring the plugin in tailwind.config.js<\/code>:<\/p>\n
\r\n\/\/ tailwind.config.js\r\n\/** @type {import('tailwindcss').Config} *\/\r\nmodule.exports = {\r\n  \/\/...\r\n  plugins: [\r\n    require('tailwindcss-react-aria-components')({ prefix: 'rac' })\r\n  ],\r\n}\r\n<\/pre>\n
On Tailwind v4<\/strong>, you can pass the prefix option in the @plugin<\/code> directive in your main CSS file, like below:<\/p>\n
\r\n@import \"tailwindcss\";\r\n@plugin \"tailwindcss-react-aria-components\" { prefix: hk };\r\n<\/pre>\n
Now, all the variants will be prefixed with rac-<\/code>, so disabled:<\/code> becomes rac-disabled:<\/code>, and selected:<\/code> becomes rac-selected:<\/code>.<\/p>\n
Here\u2019s the same example as before, but with the prefix applied:<\/p>\n
\r\nimport { Button } from 'react-aria-components';\r\n\r\nfunction App() {\r\n    return (\r\n        <Button className=\"hk-disabled:opacity-50\" isDisabled>\r\n            Submit\r\n        <\/Button>\r\n    );\r\n}\r\n<\/pre>\n
Here is a quick demo of the plugin in action.<\/p>\n