blog/tailwind.config.cjs

const { fontFamily } = require('tailwindcss/defaultTheme')
const config = require('./tailwind.theme.config.cjs')
/**
 * Find the applicable theme color palette, or use the default one
 */
const themeConfig = process.env.THEME_KEY && config[process.env.THEME_KEY] ? config[process.env.THEME_KEY] : config.default
const { colors } = themeConfig
module.exports = {
    darkMode: 'class',
    content: [
        './public/**/*.html',
        // Posts are authored with raw HTML + utility classes (images, callouts),
        // so markdown has to be scanned too — otherwise those classes are only
        // emitted by luck, when some .astro file happens to use them as well.
        './src/**/*.{astro,js,ts,tsx,md,mdx}',
        // @gabvdl/ui ships JSX with Tailwind classes; they survive the purge
        // only if the dist is scanned here (the Tailwind-v3 twin of `@source`).
        './node_modules/@gabvdl/ui/dist/**/*.js'
    ],
    safelist: ['dark'],
    theme: {
		fontFamily: {
			sans: ['Fira Code', ...fontFamily.sans],
		},
		extend: {
            colors: {
                theme: {
                    ...colors
                },
                // shadcn-style tokens consumed by @gabvdl/ui components; the
                // CSS variables come from @gabvdl/ui/theme.css and are remapped
                // per design in src/styles/designs/base.css.
                border: 'var(--color-border)',
                input: 'var(--color-input)',
                ring: 'var(--color-ring)',
                background: 'var(--color-background)',
                foreground: 'var(--color-foreground)',
                primary: { DEFAULT: 'var(--color-primary)', foreground: 'var(--color-primary-foreground)' },
                secondary: { DEFAULT: 'var(--color-secondary)', foreground: 'var(--color-secondary-foreground)' },
                destructive: { DEFAULT: 'var(--color-destructive)', foreground: 'var(--color-destructive-foreground)' },
                muted: { DEFAULT: 'var(--color-muted)', foreground: 'var(--color-muted-foreground)' },
                accent: { DEFAULT: 'var(--color-accent)', foreground: 'var(--color-accent-foreground)' },
                popover: { DEFAULT: 'var(--color-popover)', foreground: 'var(--color-popover-foreground)' },
                card: { DEFAULT: 'var(--color-card)', foreground: 'var(--color-card-foreground)' }
            },
            typography: (theme) => ({
                dark: {
                    css: {
                        color: theme("colors.gray.200"),
                        blockquote: {
                            color: colors.dark.primary,
                            borderColor: colors.primary
                        },
                        'blockquote > p::before, p::after': {
                            color: colors.primary,
                        },
                        // The base prose theme colours `strong` and inline `code`
                        // near-black for a light background; without these two
                        // overrides bold text and inline code are barely legible
                        // once the dark class is on.
                        strong: {
                            color: theme("colors.gray.100"),
                        },
                        code: {
                            color: colors.dark.primary,
                        },
                        'code::before, code::after': {
                            color: colors.dark.primary,
                        },
                        'thead th': {
                            color: theme("colors.gray.100"),
                            borderBottomColor: theme("colors.gray.600"),
                        },
                        'tbody tr': {
                            borderBottomColor: theme("colors.gray.700"),
                        },
                        hr: {
                            borderColor: theme("colors.gray.700"),
                        },
                    },
                },
                DEFAULT: {
                    css: {
                        a: {
                            color: colors.dark.primary,
                              '&:hover': {
                                color: colors.primary,
                              },
                        },
                        blockquote: {
                            color: colors.primary,
                            fontSize: theme("fontSize.2xl"),
                            borderColor: colors.dark.primary,
                        },
                        'blockquote > p::before, p::after': {
                            color: colors.dark.primary,
                        },
                        h1: {
                            color: colors.dark.secondary,
                        },
                        h2: {
                            color: colors.dark.secondary,
                        },
                        h3: {
                            color: colors.dark.secondary,
                        },
                    }
                },
            }),
		},
	},
    variants: {
        extend: { typography: ["dark"] }
    },
    plugins: [
        require('@tailwindcss/typography'),
        require('@tailwindcss/forms'),
        // line-clamp is core since Tailwind 3.3 — the plugin only warns now.
        require('@tailwindcss/aspect-ratio'),
        require('tailwindcss-hyphens'),
    ]
};