Here's my package.json:

{
    "$schema": "https://json.schemastore.org/package",
    "name": "dynamic-qr-code-generator",
    "description": "",
    "version": "1.2.0",
    "private": true,
    "license": "UNLICENSED",
    "type": "module",
    "scripts": {
        "format": "biome check --linter-enabled=false --apply .",
        "dev": "next dev",
        "build": "next build",
        "start": "NODE_ENV=production next start",
        "lint": "next lint && tsc --noEmit",
        "preview": "NODE_ENV=production next build && next start"
    },
    "dependencies": {
        "@vercel/postgres": "^0.5.0",
        "argon2": "^0.31.2",
        "daisyui": "^3.6.4",
        "js-base64": "^3.7.5",
        "lodash": "4.17.21",
        "next": "latest",
        "next-auth": "latest",
        "qrcode": "^1.5.3",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "react-icons": "^5.0.1",
        "sharp": "^0.31.3",
        "zod": "^3.22.4",
        "zod-validation-error": "^2.0.0"
    },
    "devDependencies": {
        "@biomejs/biome": "^1.4.0",
        "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
        "@tailwindcss/typography": "0.5.9",
        "@types/lodash": "^4.14.200",
        "@types/node": "^20.8.7",
        "@types/qrcode": "^1.5.4",
        "@types/react": "latest",
        "@types/react-dom": "latest",
        "@typescript-eslint/eslint-plugin": "^6.8.0",
        "@typescript-eslint/parser": "^6.8.0",
        "autoprefixer": "10.4.13",
        "bun-types": "^1.0.25",
        "eslint": "8.33.0",
        "eslint-config-next": "latest",
        "eslint-config-prettier": "8.6.0",
        "postcss": "^8.4.33",
        "postcss-flexbugs-fixes": "5.0.2",
        "postcss-preset-env": "8.0.1",
        "prettier": "2.8.3",
        "prettier-plugin-sort-json": "1.0.0",
        "prettier-plugin-tailwindcss": "^0.2.2",
        "tailwind": "^4.0.0",
        "tailwindcss": "^3.4.1",
        "typescript": "^5.2.2"
    }
}

Here's my PostCSS and Tailwind configs respectively:

import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";

import tailwindConfig from "~/tailwind.config.js";

// import postcssFlexbugsFixes from "postcss-flexbugs-fixes";
// import postcssPresetEnv from "postcss-preset-env";

export default {
    // "postcss-flexbugs-fixes": {},
    // "postcss-preset-env": {
    //     "autoprefixer": {
    //         "flexbox": "no-2009"
    //     },
    //     "features": {
    //         "custom-properties": false
    //     },
    //     "stage": 3
    // },
    plugins: [autoprefixer, tailwindcss(tailwindConfig)],
};

import daisyUI from "daisyui";
import defaultTheme from "tailwindcss/defaultTheme";
import tailwindCSSTypography from "@tailwindcss/typography";

/** @type {import('tailwindcss').Config} */
export default {
    content: ["src/**/*.tsx"],
    daisyui: {
        logs: false,
        themes: ["light"],
    },
    plugins: [tailwindCSSTypography, daisyUI],
    theme: {
        extend: {
            fontFamily: {
                sans: ["Inter", ...defaultTheme.fontFamily.sans],
            },
        },
    },
};

Soz for the dumping.

Have tried using Node 20 instead of Bun latest to no avail.

The PostCSS followed the JSON format but it caused a separate error, so I ended up changing it to use the packages directly (which I think happens under the hood anyway).

Bump.

Feel like I've tried everything, general solution for me was to stick with ESM configs for now. Very odd that it doesn't work, even updated virtually every package to no avail.