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

Posted 2023-03-06

【中文标题】用于添加自定义实用程序的 Tailwind 插件不适用于 Next

【英文标题】：Tailwind plugin for adding custom utility not applying on Next

【发布时间】：2021-06-29 14:57:54

【问题描述】：

我对 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"
  

有什么我错过的吗？

【参考方案1】：

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

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

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

【讨论】：

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