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

Question

我对 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);
    }),
  ],
};

我按照 tailwind official doc 中的步骤进行操作

# If you're on Next.js v10
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# If you're on Next.js v9 or older
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

我的下一个版本是 10.1.2 next version screenshot

结果是这样的

//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"
  }
}

有什么我错过的吗？

Answer 1

样式应遵循 CSS-in-JS 语法(请参阅 docs )。

只需在类名前添加一个句点. 字符即可。

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