Skip to content

Commit 1d6ed94

Browse files
authored
Add tailwind example link to RAC overview page (#4338)
1 parent 5aa969f commit 1d6ed94

File tree

2 files changed

+8
-1
lines changed

2 files changed

+8
-1
lines changed

examples/rac-tailwind/src/App.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ import stocks from './stocks.json';
99
export function App() {
1010
return (
1111
<>
12-
<h1 className="text-center text-4xl font-serif font-semibold mb-8">React Aria Components 🤝 Tailwind CSS</h1>
12+
<h1 className="text-center text-4xl font-serif font-semibold mb-3">React Aria Components 🤝 Tailwind CSS</h1>
13+
<p className="text-center font-serif mb-8">
14+
<a className="hover:text-blue-100 transition underline" target="_blank" href="https://github.com/adobe/react-spectrum/blob/main/examples/rac-tailwind/src/App.js">Example code</a><a className="hover:text-blue-100 transition underline" target="_blank" href="https://react-spectrum.adobe.com/react-aria/react-aria-components.html">Docs</a>
15+
</p>
1316
<div className="grid gap-4 grid-cols-1 md:grid-cols-[repeat(auto-fit,theme(width.96))] auto-rows-fr justify-center">
1417
<MenuExample />
1518
<SelectExample />

packages/react-aria-components/docs/react-aria-components.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -421,6 +421,10 @@ If you are using Tailwind CSS, we recommend using the [tailwindcss-animate](http
421421
</Popover>
422422
```
423423

424+
## Examples
425+
426+
The documentation for each component includes many examples styled using vanilla CSS and the default class names. We also have an example of many of the components using Tailwind CSS. You can find the [code](https://github.com/adobe/react-spectrum/blob/main/examples/rac-tailwind/src/App.js) in the repo, as well as a [live demo](https://bit.ly/rac-demo).
427+
424428
## Components
425429

426430
### Buttons

0 commit comments

Comments
 (0)