diff --git a/src/styles/base.css b/src/styles/base.css index 9cd73b931..e78776856 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -59,9 +59,9 @@ prose-code:rounded prose-code:bg-skin-card - prose-code:bg-opacity-75 prose-code:p-1 prose-code:!text-skin-base + prose-code:bg-opacity-75 prose-code:p-1 prose-code:before:!content-[''] prose-code:after:!content-[''] - prose-pre:!text-skin-base prose-ol:!text-skin-base + prose-ol:!text-skin-base prose-ul:overflow-x-clip prose-ul:!text-skin-base prose-li:marker:!text-skin-accent prose-table:text-skin-base prose-th:border prose-th:border-skin-line prose-td:border diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 38b212c93..8e4386095 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -17,49 +17,59 @@ module.exports = { sm: "640px", }, - // Uncomment the following extend - // if existing Tailwind color palette will be used - - // extend: { - textColor: { - skin: { - base: withOpacity("--color-text-base"), - accent: withOpacity("--color-accent"), - inverted: withOpacity("--color-fill"), + extend: { + textColor: { + skin: { + base: withOpacity("--color-text-base"), + accent: withOpacity("--color-accent"), + inverted: withOpacity("--color-fill"), + }, }, - }, - backgroundColor: { - skin: { - fill: withOpacity("--color-fill"), - accent: withOpacity("--color-accent"), - inverted: withOpacity("--color-text-base"), - card: withOpacity("--color-card"), - "card-muted": withOpacity("--color-card-muted"), + backgroundColor: { + skin: { + fill: withOpacity("--color-fill"), + accent: withOpacity("--color-accent"), + inverted: withOpacity("--color-text-base"), + card: withOpacity("--color-card"), + "card-muted": withOpacity("--color-card-muted"), + }, }, - }, - outlineColor: { - skin: { - fill: withOpacity("--color-accent"), + outlineColor: { + skin: { + fill: withOpacity("--color-accent"), + }, }, - }, - borderColor: { - skin: { - line: withOpacity("--color-border"), - fill: withOpacity("--color-text-base"), - accent: withOpacity("--color-accent"), + borderColor: { + skin: { + line: withOpacity("--color-border"), + fill: withOpacity("--color-text-base"), + accent: withOpacity("--color-accent"), + }, }, - }, - fill: { - skin: { - base: withOpacity("--color-text-base"), - accent: withOpacity("--color-accent"), + fill: { + skin: { + base: withOpacity("--color-text-base"), + accent: withOpacity("--color-accent"), + }, + transparent: "transparent", + }, + fontFamily: { + mono: ["IBM Plex Mono", "monospace"], + }, + + typography: { + DEFAULT: { + css: { + pre: { + color: false, + }, + code: { + color: false, + }, + }, + }, }, - transparent: "transparent", - }, - fontFamily: { - mono: ["IBM Plex Mono", "monospace"], }, - // }, }, plugins: [require("@tailwindcss/typography")], };