Javascript 用于添加自定义实用程序的Tailwind插件不适用于Next

我对tailwindcss非常陌生，我想知道为什么我的自定义实用程序没有被应用

// tailwindcss.config.js
const plugin = require("tailwindcss/plugin");

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      borderColor: ["group-focus"],
    },
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        "break-word": {
          wordBreak: "break-word", // actually break-all exists but not break-word
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};

我从一开始就遵循这些步骤

我的下一个版本是10.1.2

导致这个

//package.json
{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@feathersjs/client": "^4.5.11",
    "next": "10.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "socket.io-client": "^2.4.0",
    "url-loader": "^4.1.1"
  },
  "devDependencies": {
    "@tailwindcss/postcss7-compat": "^2.0.4",
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.35",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
  }
}

---

有什么我遗漏的吗？

样式应该遵循JS语法中的CSS（请参阅）

只需在类名之前添加句点

字符

const newUtilities = {
  ".break-word": {
    wordBreak: "break-word",
  },
};

---

就这样！非常感谢你@Nikolai Kiselev

const newUtilities = {
  ".break-word": {
    wordBreak: "break-word",
  },
};