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:
parent
d85eb36a72
commit
62e0ddeabd
File diff suppressed because one or more lines are too long
|
|
@ -14,3 +14,92 @@
|
||||||
.card {
|
.card {
|
||||||
@apply bg-white border border-gray-200 rounded-md shadow-sm p-4;
|
@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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue