React Aria Components + Spectrum + Tailwind

Intro

📙 Overview

This resource is meant to help you get started with creating custom components using React Aria Components and Tailwind CSS, with a theme that features Spectrum styles and values. The goal for this is to enable you to deliver accessible custom Spectrum components more quickly.

✅ When to use this

When you need to implement a component that follows Spectrum guidelines, but doesn't exist in React Spectrum.

❌ When not to use this

When you want to avoid patterns specifically outlined by Spectrum, or when a React Spectrum component already exists for your use case.

⚠️ Risks

Since you're taking ownership of the components you build, you still need to ensure they follow Spectrum guidelines and accessibility guidelines.

Setup

📦 Install dependencies
We need to install React Spectrum, React Aria Components, and the RAC Tailwind plugin.
yarn add @adobe/react-spectrum react-aria-components tailwindcss-react-aria-components
Note that the reason React Spectrum is needed, is because the Provider will provide CSS variables that our theme will reference.
⚡ Install Tailwind
Follow the instructions in the Tailwind Docs based on your build setup.

🛠️ Configure Tailwind

In your tailwind.config.js, include the preset from this template:

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./src/spectrum-preset.js')
  ],
  plugins: [
    require('tailwindcss-react-aria-components')
  ],
}

Then, add a React Spectrum Provider to your app if one doesn't already exist. This will ensure that your page has access to the proper CSS variables. If you include these variables using some other method, that will work too.

Usage

🎨 Add styles

You can now use Tailwind classes to style your components.

Here are some examples:

Using ring will give you a focus ring with good default Spectrum styles for it's color, width, and offset.
Using bg-blue-600 will give you a background that matches --spectrum-global-color-blue-600.
Using w-25 will give you a width of var(--spectrum-global-dimension-size-25).
Using ease-in duration-100 will give you a transition that matches Spectrum's motion values.
Using sm:text-left will give you left text alignment for small width devices based on Spectrum's break points.
Using dark:bg-black will give you a black background if the user is in dark mode based on the React Spectrum provider.

🪄 Styling based on state

To see how to add Tailwind styles based on state, see the RAC Styling docs.

[RAC + Spectrum + Tailwind] Cookbook