fix(web-ui): add @tailwindcss/typography plugin to fix table rendering in docs
The Markdown component uses 'prose' classes (prose-lg prose-headings:) but @tailwindcss/typography was not installed/registered. Tables and other MD elements rendered unstyled. Fix: install @tailwindcss/typography@latest, register via @plugin directive in globals.css, add custom dark-theme table styles, and remove redundant tailwind.config.js.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
/* Linear design system: dark-mode-first */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
@@ -42,3 +43,32 @@ body {
|
||||
font-display: swap;
|
||||
src: url("https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrNCGw.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* Custom prose styles for dark theme — tables */
|
||||
.prose table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.prose th,
|
||||
.prose td {
|
||||
border: 1px solid var(--color-border);
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.prose th {
|
||||
background: var(--color-elevated);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose td {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.prose tbody tr:nth-child(even) {
|
||||
background: rgba(15, 16, 17, 0.5);
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@mcpedia/config": "workspace:*",
|
||||
"@mcpedia/core": "workspace:*",
|
||||
"@tailwindcss/typography": "^0.5.20",
|
||||
"github-slugger": "^2.0.0",
|
||||
"next": "16.3.1",
|
||||
"react": "19.2.8",
|
||||
|
||||
Reference in New Issue
Block a user