Bug with react-tailwindcss-datepicker

Question

I've used tailwindcss for a while now and was always very happy. But I am currently facing major problems with react-tailwindcss-datepicker. In an empty project the datepicker works as expected but in my current nextjs project it doesn't. All dependencies are at latest and usage as described in the docs.

Edit: If I copy the src i works great.

It has to be a conflict between my project and react-tailwindcss-datepicker, but I don't know where. Does anyone has an idea where the problem could be? Any help would be appreciated. 🙏🏻

How it should look

How it looks

package.json

{
    "name": "MyProject",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
    },
    "dependencies": {
        "@emotion/react": "^11.10.4",
        "@emotion/styled": "^11.10.4",
        "@headlessui/react": "^1.7.14",
        "@heroicons/react": "^2.0.17",
        "@hookform/resolvers": "^2.9.8",
        "@mui/icons-material": "^5.10.3",
        "@mui/material": "^5.10.5",
        "@tailwindcss/forms": "^0.5.3",
        "axios": "^0.27.2",
        "dancemonkey-dal": "*",
        "dayjs": "^1.11.7",
        "eslint-config": "*",
        "form-data": "^4.0.0",
        "html-to-image": "^1.11.1",
        "next": "12.2.5",
        "next-auth": "^4.10.3",
        "react": "^18.2.0",
        "react-dom": "18.2.0",
        "react-hook-form": "^7.36.1",
        "react-multi-carousel": "^2.8.2",
        "react-query": "^3.39.2",
        "react-tailwindcss-datepicker": "^1.6.0",
        "react-toast": "^1.0.3",
        "ts-config": "*",
        "yup": "^0.32.11"
    },
    "devDependencies": {
        "@rvxlab/tailwind-plugin-ios-full-height": "^1.1.0",
        "@types/node": "18.7.14",
        "@types/react": "18.0.18",
        "@types/react-dom": "18.0.6",
        "autoprefixer": "^10.4.8",
        "eslint": "8.22.0",
        "eslint-config-next": "12.2.5",
        "orval": "^6.9.6",
        "postcss": "^8.4.16",
        "tailwindcss": "^3.1.8",
        "typescript": "4.8.2"
    },
    "resolutions": {
        "webpack": "^5"
    }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    mode: 'jit',
    important: true,
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
        "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",
    ],
    plugins: [
        require('@rvxlab/tailwind-plugin-ios-full-height'),
        require('@tailwindcss/forms')
    ],
    theme: {
        extend: {
            colors: {
                custom: '#517080'
            },
            screens: {
                'csm': '640px',
                'cs': '700px',
                'cmd': '768px',
                'cla': '800px',
                'clb': '900px',
                'clc': '950px',
                'clg': '1024px',
                'cxl': '1280px',
                'c2xl': '1536px',
                'c3xl': '1920px',
            },
        },
    }
}

Answer 1

I had a monorepo which caused the problem. All you need to do is to change the path inside tailwind.config to match actual node_modules folder where the package is installed. I my case it was something like that:

content: [
  './src/**/*.{js, jsx, ts, tsx, mdx}',
  '../../node_modules/react-tailwindcss-datepicker/dist/index.esm.js'
]