From 9bba06a8254cc20f8b7a507630ff93bcc280bae4 Mon Sep 17 00:00:00 2001
From: Brian Richter <brian@aviary.tech>
Date: Thu, 30 Jan 2025 12:33:20 -0800
Subject: [PATCH] chore(docs): update to include tailwind config

---
 src/docs/pages/GettingStartedPage.tsx | 28 +++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/docs/pages/GettingStartedPage.tsx b/src/docs/pages/GettingStartedPage.tsx
index a751b8a..cb6069e 100644
--- a/src/docs/pages/GettingStartedPage.tsx
+++ b/src/docs/pages/GettingStartedPage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Title } from '../../components/typography/Title';
 import { Card } from '../../components/card/Card';
 import { ComponentDemo } from '../components/ComponentDemo';
+import { CodeEditor } from '../../components/editor/CodeEditor';
 import { Code } from '../../components/typography/Code';
 
 export const GettingStartedPage = () => {
@@ -36,6 +37,33 @@ export const GettingStartedPage = () => {
         </Card.Content>
       </Card>
 
+      <Card>
+        <Card.Header>
+          <Title level={2}>Tailwind CSS Configuration</Title>
+        </Card.Header>
+        <Card.Content>
+          <div className="space-y-4">
+            <p className="text-gray-400">
+              AV1-C uses Tailwind CSS for styling. You'll need to configure your Tailwind CSS to scan the component classes in the package:
+            </p>
+            <CodeEditor
+              value={`// tailwind.config.js
+module.exports = {
+  content: [
+    // ... your other content paths
+    "./node_modules/av1-c/**/*.{js,ts,jsx,tsx}",
+  ],
+  // ... rest of your config
+}`}
+              language="javascript"
+            />
+            <p className="text-gray-400 mt-4">
+              This ensures that all the necessary styles for AV1-C components are included in your final CSS bundle.
+            </p>
+          </div>
+        </Card.Content>
+      </Card>
+
       <Card>
         <Card.Header>
           <Title level={2}>Quick Start</Title>