2 Commits

Author SHA1 Message Date
b85247d8b4 Fix missing prose styles in production by converting Tailwind config to JS
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.
2026-04-02 21:09:53 -07:00
db31ef84cf Replace Endurance image 2026-04-02 21:08:00 -07:00
5 changed files with 9 additions and 11 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

View File

@@ -1,6 +1,6 @@
import { ArticleLayout } from '@/components/ArticleLayout' import { ArticleLayout } from '@/components/ArticleLayout'
import {MdxImage as Image } from '@/components/MdxImage' import {MdxImage as Image } from '@/components/MdxImage'
import endurance from './endurance.webp' import endurance from './endurance.png'
export const article = { export const article = {
author: 'Leslie Brown', author: 'Leslie Brown',

View File

@@ -1,11 +1,11 @@
import typographyPlugin from '@tailwindcss/typography' const typographyPlugin = require('@tailwindcss/typography')
import formsPlugin from '@tailwindcss/forms'; const formsPlugin = require('@tailwindcss/forms')
import { type Config } from 'tailwindcss'
import typographyStyles from './typography' const typographyStyles = require('./typography')
export default { /** @type {import('tailwindcss').Config} */
content: ['./src/**/*.{js,jsx,ts,tsx}'], module.exports = {
content: ['./src/**/*.{js,jsx,mdx,ts,tsx}'],
darkMode: 'class', darkMode: 'class',
plugins: [ plugins: [
typographyPlugin, typographyPlugin,
@@ -29,4 +29,4 @@ export default {
}, },
typography: typographyStyles, typography: typographyStyles,
}, },
} satisfies Config }

View File

@@ -1,6 +1,4 @@
import { type PluginUtils } from 'tailwindcss/types/config' module.exports = function typographyStyles({ theme }) {
export default function typographyStyles({ theme }: PluginUtils) {
return { return {
invert: { invert: {
css: { css: {