Module not found: Can't resolve 'tailwindcss/lib/util/escapeClassName'

[yoel3imari]

Tailwind Config

import typography from '@tailwindcss/typography';
import { type Config } from "tailwindcss";
import twrtl from "tailwindcss-rtl";

const config: Config = {
theme: {
...
},
plugins: [
typography,
twrtl,
],
};

export default config;

---

{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "bun --watch run next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^5.0.1",
"@iconify/react": "^6.0.0",
"@radix-ui/react-accordion": "^1.2.3",
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-checkbox": "^1.3.2",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-label": "^2.1.2",
"@radix-ui/react-navigation-menu": "^1.2.5",
"@radix-ui/react-popover": "^1.1.6",
"@radix-ui/react-scroll-area": "^1.2.9",
"@radix-ui/react-select": "^2.1.6",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.3",
"@radix-ui/react-tooltip": "^1.2.7",
"@tanstack/react-table": "^8.21.3",
"@uiw/react-md-editor": "^4.0.8",
"axios": "^1.8.3",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"embla-carousel-autoplay": "^8.6.0",
"embla-carousel-react": "^8.6.0",
"eslint-config-next": "^15.3.2",
"framer-motion": "^12.5.0",
"jose": "^6.0.10",
"js-cookie": "^3.0.5",
"lucide-react": "latest",
"mobx": "^6.15.0",
"mobx-react-lite": "^4.1.1",
"nanoid": "^5.1.3",
"next": "^15.3.2",
"next-intl": "^4.3.4",
"next-themes": "^0.4.6",
"nextjs-toploader": "^3.8.16",
"quill": "^2.0.3",
"react": "^19.0.0",
"react-calendar": "^6.0.0",
"react-countup": "^6.5.3",
"react-day-picker": "^9.8.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.56.3",
"react-intersection-observer": "^9.16.0",
"react-quill": "^2.0.0",
"sonner": "^2.0.6",
"tailwind-merge": "^3.0.2",
"tailwindcss-animate": "^1.0.7",
"tailwindcss-rtl": "^0.9.0",
"vaul": "^1.1.2",
"zod": "^3.24.4"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@tailwindcss/typography": "^0.5.16",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@typescript-eslint/eslint-plugin": "^8.47.0",
"@typescript-eslint/parser": "^8.47.0",
"eslint": "^9",
"shadcn": "^3.3.1",
"tailwindcss": "^4",
"typescript": "^5"
},
"packageManager": "bun@1.1.29"
}

Patch suggested by ChatGPT

I have to replace the escapeClassName in module file by this everytime

// Patched version of tailwindcss-rtl for Tailwind CSS v4 compatibility
// This replaces the problematic import with a simple escape function

const escapeClassName = (className) => {
// Simple CSS class name escaping - escape special characters
return className.replace(/([^a-zA-Z0-9_-])/g, '\$1');
};

const asClass = (name) => .${escapeClassName(name)};

const nameClass = (classPrefix, key) => {
if (['default', 'DEFAULT'].includes(key)) {
return asClass(classPrefix);
}

if (key === '-') {
return asClass(-${classPrefix});
}

if (key.startsWith('-')) {
return asClass(-${classPrefix}${key});
}

return asClass(${classPrefix}-${key});
};

module.exports = nameClass;