React Aria Elements (RAC) is a library from Adobe that provides you with absolutely available, production-ready React substances—however with none default styling. This makes RAC very best for pairing with a styling framework like TailwindCSS, since you’ll be able to design the whole thing precisely the way in which you wish to have with out combating in opposition to preset kinds.
I’ve been the usage of RAC in quite a lot of tasks, and something that I love about RAC is the way it handles the part states. As an alternative of simply the usage of CSS pseudo-classes like :hover or :lively which don’t all the time behave constantly on contact units or with keyboards, it makes use of data- attributes like data-hovered, data-pressed, and data-selected.
The use of with TailwindCSS
TailwindCSS is one among my favorite tactics to taste substances. Whilst React Aria Elements paintings simply neatly with TailwindCSS, there’s a catch in terms of styling part states. As a result of RAC makes use of records attributes, you’ll be able to’t simply use Tailwind’s standard hover: or concentration: variants. As an alternative, you want to jot down out the whole characteristic the usage of Tailwind’s arbitrary variant syntax, as an example:
This works wonderful however it may be redundant. The category names can briefly get lengthy and messy, which makes our code more difficult to learn and scan. We additionally lose out on Tailwind’s to hand editor autocompletion, so typos transform much more likely.
That is precisely the issue that the tailwindcss-react-aria-components plugin is constructed to resolve. Let’s see the way it works.
Set up
Putting in the plugin is inconspicuous. We will upload it with NPM with this command beneath:
npm set up tailwindcss-react-aria-components
Configuring the plugin is dependent upon the Tailwind model you’re the usage of at the challenge.
On Tailwind v3, upload it for your tailwind.config.js:
/** @kind {import('tailwindcss').Config} */
module.exports = {
//...
plugins: [
require('tailwindcss-react-aria-components')
],
}
On Tailwind v4, use the brand new @plugin directive for your primary CSS document:
@import "tailwindcss"; @plugin "tailwindcss-react-aria-components";
As soon as put in, styling the part is extra simplified. Verbose records attributes like data-[pressed]: develop into blank variants similar to pressed:, and data-[selected]: turns into chosen:. Even non-boolean states are shorter, as an example data-orientation="vertical" now turns into orientation-vertical:.
Right here’s a snappy comparability of the 2 approaches for one of the most states in RAC:
| RAC State | Tailwind Characteristic Selector | Simplified Elegance Selector |
|---|---|---|
isHovered
|
data-[hovered]
|
hovered:
|
isPressed
|
data-[pressed]
|
pressed:
|
isSelected
|
data-[selected]
|
chosen:
|
isDisabled
|
data-[disabled]
|
disabled:
|
isFocusVisible
|
data-[focus-visible]
|
focus-visible:
|
isPending
|
data-[pending]
|
pending:
|
Prefixing
By means of default, the plugin’s modifiers are unprefixed, so you’ll be able to use variants like disabled: in an instant, as an example:
import { Button } from 'react-aria-components';
serve as App() {
go back (
);
}
However when you desire a clearer naming conference, you’ll be able to set a prefix within the config. This can also be particularly to hand in higher tasks the place you wish to have to keep away from clashes with different plugins or customized utilities.
Once more, the setup is dependent upon the Tailwind model you’re the usage of.
On Tailwind v3, you’ll be able to upload the prefix possibility when requiring the plugin in tailwind.config.js:
// tailwind.config.js
/** @kind {import('tailwindcss').Config} */
module.exports = {
//...
plugins: [
require('tailwindcss-react-aria-components')({ prefix: 'rac' })
],
}
On Tailwind v4, you’ll be able to cross the prefix possibility within the @plugin directive for your primary CSS document, like beneath:
@import "tailwindcss";
@plugin "tailwindcss-react-aria-components" { prefix: hk };
Now, all of the variants can be prefixed with rac-, so disabled: turns into rac-disabled:, and chosen: turns into rac-selected:.
Right here’s the similar instance as ahead of, however with the prefix implemented:
import { Button } from 'react-aria-components';
serve as App() {
go back (
);
}
Here’s a fast demo of the plugin in motion.
Wrapping Up
Styling React Aria Elements with TailwindCSS doesn’t should be difficult. With the tailwindcss-react-aria-components plugin, you’ll be able to skip the verbose syntax and paintings with blank, intuitive variants that really feel identical to local Tailwind utilities. This makes it a lot more straightforward to stay your code readable, your workflow clean, and your substances available by way of default.
On this article, we involved in styling. However that’s only the start. Within the subsequent one, we’ll take issues a step additional and discover how one can animate React Aria Elements with TailwindCSS, including clean movement to make your UI really feel much more polished and tasty.
Keep tuned!
The put up Find out how to Taste React Aria Elements with TailwindCSS seemed first on Hongkiat.
WordPress Website Development Source: https://www.hongkiat.com/blog/react-aria-tailwindcss-styling/