react-tailwindcss-datepicker 的错误

Question

我已经使用 tailwindcss 一段时间了，并且总是非常高兴。但我目前面临着 react-tailwindcss-datepicker 的重大问题。在空项目中，日期选择器按预期工作，但在我当前的 nextjs 项目中却不然。所有依赖项都是最新的，并且用法如文档中所述。

编辑：如果我复制 src，效果会很好。

一定是我的项目和react-tailwindcss-datepicker之间有冲突，但我不知道在哪里。有谁知道问题可能出在哪里？任何帮助，将不胜感激。 🙏🏻

它应该是什么样子

看起来怎么样

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

我有一个 monorepo 导致了这个问题。您需要做的就是更改 tailwind.config 中的路径以匹配安装包的实际 node_modules 文件夹。我的情况是这样的：

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