Skip to content

Commit 751ff1a

Browse files
committed
Update documentation for Tailwind integration
- Changed references from **globals.css** to **index.css** in getting-started.mdx to align with Tailwind configuration. - Restored the OpenInV0Button in splat-viewer.mdx and added instructions for ensuring Tailwind processing in **index.css**.
1 parent 5aa43af commit 751ff1a

File tree

2 files changed

+11
-6
lines changed

2 files changed

+11
-6
lines changed

packages/docs/content/blocks/getting-started.mdx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,12 @@ Follow the official [Tailwind CSS installation guide](https://tailwindcss.com/do
7878
</Tabs.Tab>
7979
</Tabs>
8080

81-
### Import PlayCanvas Blocks Styles
81+
### Configure Tailwind
8282

83-
Add the following to your **globals.css** file. This ensures that the blocks are styled correctly.
83+
Add the following to your **index.css** file. This ensures that the block is processed by Tailwind.
8484

85-
```css copy filename=src/styles/globals.css
86-
@import 'tailwindcss';
87-
@import '@playcanvas/blocks';
85+
```css copy filename=src/index.css
8886
@source '../node_modules/@playcanvas/blocks';
8987
```
88+
9089
</Steps>

packages/docs/content/blocks/splat-viewer.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Supports large assets with lazy loading and automatic framing. Use it in modals,
1515
Supports compressed gaussian splats.
1616

1717
<div className="lg:outline lg:p-28 -mx-4 lg:-mx-6 mt-12 mb-0 rounded-t-lg bg-linear-to-br from-indigo-500 to-purple-600 relative">
18-
{/* <OpenInV0Button url="https://v0.dev/chat/api/open?url=https://playcanvas-react.vercel.app/r/splat-viewer.json" className="absolute top-4 right-4" /> */}
18+
<OpenInV0Button url="https://v0.dev/chat/api/open?url=https://playcanvas-react.vercel.app/r/splat-viewer.json" className="absolute top-4 right-4" />
1919
<Viewer.Splat src={splatUrl} className="aspect-2.39:1 bg-purple-200 rounded-t-lg lg:rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
2020
<Viewer.Controls autoHide >
2121
<div className="flex gap-1 flex-grow">
@@ -107,6 +107,12 @@ Install the component from your command line.
107107
npx shadcn@latest add https://playcanvas-react.vercel.app/r/splat-viewer.json
108108
```
109109

110+
Ensure the block is processed by Tailwind by adding the following to your `index.css`.
111+
112+
```css
113+
@source "../node_modules/@playcanvas/blocks";
114+
```
115+
110116
### Anatomy
111117

112118
Import all parts and piece them together.

0 commit comments

Comments
 (0)