The production Docker build (node:22-alpine) was failing to load the
TypeScript Tailwind config via jiti, causing Tailwind to silently fall
back to a default config with no plugins. This meant the
@tailwindcss/typography plugin never ran, so no .prose CSS rules were
generated. Tailwind's preflight reset (p { margin: 0 }) was still
applied with nothing to override it, making all blog post paragraphs
run together with zero spacing.
Converting tailwind.config.ts and typography.ts to plain JS files
removes the dependency on jiti for config loading. Also adds .mdx to
the Tailwind content glob so utility classes used directly in MDX files
(not-prose, flex, etc.) are included in the production CSS.
33 lines
1.0 KiB
JavaScript
33 lines
1.0 KiB
JavaScript
const typographyPlugin = require('@tailwindcss/typography')
|
|
const formsPlugin = require('@tailwindcss/forms')
|
|
|
|
const typographyStyles = require('./typography')
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: ['./src/**/*.{js,jsx,mdx,ts,tsx}'],
|
|
darkMode: 'class',
|
|
plugins: [
|
|
typographyPlugin,
|
|
formsPlugin,
|
|
],
|
|
theme: {
|
|
fontSize: {
|
|
xs: ['0.8125rem', { lineHeight: '1.5rem' }],
|
|
sm: ['0.875rem', { lineHeight: '1.5rem' }],
|
|
base: ['1rem', { lineHeight: '1.75rem' }],
|
|
lg: ['1.125rem', { lineHeight: '1.75rem' }],
|
|
xl: ['1.25rem', { lineHeight: '2rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
|
'4xl': ['2rem', { lineHeight: '2.5rem' }],
|
|
'5xl': ['3rem', { lineHeight: '3.5rem' }],
|
|
'6xl': ['3.75rem', { lineHeight: '1' }],
|
|
'7xl': ['4.5rem', { lineHeight: '1' }],
|
|
'8xl': ['6rem', { lineHeight: '1' }],
|
|
'9xl': ['8rem', { lineHeight: '1' }],
|
|
},
|
|
typography: typographyStyles,
|
|
},
|
|
}
|