Add prose styling for documentation content

The prose classes from @tailwindcss/typography weren't working because
the plugin wasn't installed. Added custom prose styling for:
- Proper paragraph spacing (mb-4)
- Header margins (mt-10 for h2, mt-8 for h3)
- Lead paragraphs styling
- List styling with proper indentation
- Code block styling (dark theme)
- Inline code styling
- Table styling
- Blockquote and details styling

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rob 2026-01-01 06:13:02 -04:00
parent d85eb36a72
commit 62e0ddeabd
2 changed files with 90 additions and 1 deletions

File diff suppressed because one or more lines are too long

View File

@ -14,3 +14,92 @@
.card {
@apply bg-white border border-gray-200 rounded-md shadow-sm p-4;
}
/* Prose styling for documentation content */
.prose {
@apply text-gray-700 leading-relaxed;
}
.prose p {
@apply mb-4;
}
.prose p.lead {
@apply text-xl text-gray-600 mb-6;
}
.prose h2 {
@apply text-2xl font-bold text-gray-900 mt-10 mb-4;
}
.prose h3 {
@apply text-xl font-semibold text-gray-900 mt-8 mb-3;
}
.prose h4 {
@apply text-lg font-semibold text-gray-900 mt-6 mb-2;
}
.prose ul, .prose ol {
@apply mb-4 pl-6;
}
.prose ul {
@apply list-disc;
}
.prose ol {
@apply list-decimal;
}
.prose li {
@apply mb-2;
}
.prose pre {
@apply bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto mb-4 text-sm;
}
.prose code {
@apply bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-sm font-mono;
}
.prose pre code {
@apply bg-transparent text-gray-100 p-0;
}
.prose a {
@apply text-indigo-600 hover:text-indigo-800 underline;
}
.prose table {
@apply w-full mb-4 border-collapse;
}
.prose th, .prose td {
@apply border border-gray-200 px-4 py-2 text-left;
}
.prose th {
@apply bg-gray-100 font-semibold;
}
.prose blockquote {
@apply border-l-4 border-gray-300 pl-4 italic text-gray-600 my-4;
}
.prose details {
@apply mb-4;
}
.prose details summary {
@apply cursor-pointer font-medium;
}
.prose details[open] summary {
@apply mb-2;
}
.prose hr {
@apply my-8 border-gray-200;
}