Next.js应用中Tailwind hover类不生效问题求助

问题描述 #

我用Tailwind和Next.js开发演示仪表盘模板，多数功能正常，但部分Tailwind样式规则失效。比如hover:cursor-pointer不生效，在/Components/Cards/CardTable.js第98行添加的hover:bg-black也被忽略。

项目配置文件 #

package.json #

{
  "name": "notus-nextjs",
  "homepage": "https://demos.creative-tim.com/notus-nextjs",
  "version": "1.1.0",
  "description": "Notus NextJS - A free Tailwind CSS, NextJS and React Ui Kit and Admin by Creative Tim.",
  "repository": "https://github.com/creativetimofficial/notus-nextjs",
  "license": "MIT",
  "dependencies": {
    "@fortawesome/fontawesome-free": "5.15.3",
    "@popperjs/core": "2.9.1",
    "@tailwindcss/forms": "0.2.1",
    "chart.js": "2.9.4",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "next": "10.0.9",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-scripts": "4.0.3",
    "tailwindcss": "2.0.4"
  },
  "scripts": {
    "start": "next start",
    "build": "next build",
    "dev": "next dev",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm run dev",
    "build:tailwind": "tailwind build styles/index.css -o styles/tailwind.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "optionalDependencies": {
    "typescript": "4.2.3"
  },
  "devDependencies": {
    "autoprefixer": "10.2.5",
    "postcss": "8.2.8"
  }
}

Tailwind 配置文件 #

const plugin = require("tailwindcss/plugin");
const colors = require("tailwindcss/colors");

module.exports = {
  purge: {
    enabled: true,
    content: ["./**/*.html", "./*.html", "./**/*.js", "./*.js"],
    options: {
      safelist: [],
    },
  },
  theme: {
    colors: {
      ...colors,
    },
    extend: {
      minHeight: {
        "screen-75": "75vh",
      },
      fontSize: {
        55: "55rem",
      },
      opacity: {
        80: ".8",
      },
      zIndex: {
        2: 2,
        3: 3,
      },
      inset: {
        "-100": "-100%",
        "-225-px": "-225px",
        "-160-px": "-160px",
        "-150-px": "-150px",
        "-94-px": "-94px",
        "-50-px": "-50px",
        "-29-px": "-29px",
        "-20-px": "-20px",
        "25-px": "25px",
        "40-px": "40px",
        "95-px": "95px",
        "145-px": "145px",
        "195-px": "195px",
        "210-px": "210px",
        "260-px": "260px",
      },
      height: {
        "95-px": "95px",
        "70-px": "70px",
        "350-px": "350px",
        "500-px": "500px",
        "600-px": "600px",
      },
      maxHeight: {
        "860-px": "860px",
      },
      maxWidth: {
        "100-px": "100px",
        "120-px": "120px",
        "150-px": "150px",
        "180-px": "180px",
        "200-px": "200px",
        "210-px": "210px",
        "580-px": "580px",
      },
      minWidth: {
        "140-px": "140px",
        48: "12rem",
      },
      backgroundSize: {
        full: "100%",
      },
    },
  },
  variants: [
    "responsive",
    "group-hover",
    "focus-within",
    "first",
    "last",
    "odd",
    "even",
    "hover",
    "focus",
    "active",
    "visited",
    "disabled",
  ],
  plugins: [
    require("@tailwindcss/forms"),
    plugin(function ({ addComponents, theme }) {
      const screens = theme("screens", {});
      addComponents([
        {
          ".container": { width: "100%" },
        },
        {
          [`@media (min-width: ${screens.sm})`]: {
            ".container": {
              "max-width": "640px",
            },
          },
        },
        {
          [`@media (min-width: ${screens.md})`]: {
            ".container": {
              "max-width": "768px",
            },
          },
        },
        {
          [`@media (min-width: ${screens.lg})`]: {
            ".container": {
              "max-width": "1024px",
            },
          },
        },
        {
          [`@media (min-width: ${screens.xl})`]: {
            ".container": {
              "max-width": "1280px",
            },
          },
        },
        {
          [`@media (min-width: ${screens["2xl"]})`]: {
            ".container": {
              "max-width": "1280px",
            },
          },
        },
      ]);
    }),
  ],
};

内容的提问来源于stack exchange，提问作者hello B