用于添加自定义实用程序的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);
}),
],
};

我遵循了顺风官方文档中的这些步骤

# 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下一版本截图

导致这种

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

样式应该遵循JS语法中的CSS(请参阅文档(。

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

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