Skip to content

Commit

Permalink
chore(docs): update to include tailwind config
Browse files Browse the repository at this point in the history
  • Loading branch information
brianorwhatever committed Jan 30, 2025
1 parent 980e4f0 commit 9bba06a
Showing 1 changed file with 28 additions and 0 deletions.
28 changes: 28 additions & 0 deletions src/docs/pages/GettingStartedPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 9bba06a

Please sign in to comment.