Reactjs PurgeCSS删除next.js中的Tailwind字体

我正在构建一个next.js站点，它使用以下特定文本

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['SFMono-Regular', 'Menlo', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        // indigo: '#7D00FF',
        blue: '#51B1E8',
        red: '#FF0E00',
      },
    },
  },
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

由于某些原因，文本样式在部署到Vercel时会被清除。这是清除css配置

module.exports = {
    plugins: [
      "postcss-import",
      "tailwindcss",
      "autoprefixer"
    ]
  };

  const purgecss = [
    "@fullhuman/postcss-purgecss",
    {
      content: [
        './pages/**/**/*.{js,jsx,ts,tsx}',
        './pages/**/*.{js,jsx,ts,tsx}',
        './pages/*.{js,jsx,ts,tsx}',

        './components/**/**/*.{js,jsx,ts,tsx}',
        './components/**/*.{js,jsx,ts,tsx}',
        './components/*.{js,jsx,ts,tsx}',
        ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    }
  ];
  module.exports = {
    plugins: [
      "postcss-import",
      "tailwindcss",
      "autoprefixer",
      ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
    ]
  };

module.exports={
插件：[
“邮政编码导入”，
“tailwindcss”，
“自动引用器”
]
};
常量purgecss=[
“@fullhuman/postcss purgecss”，
{
内容：[
“./pages/***/***.{js，jsx，ts，tsx}”，
“./pages/***.{js，jsx，ts，tsx}”，
“./pages/*.{js，jsx，ts，tsx}”，
“./components/***/***.{js，jsx，ts，tsx}”，
“./components/***.{js，jsx，ts，tsx}”，
“./components/*.{js，jsx，ts，tsx}”，
],
defaultExtractor:content=>content.match（/[\w-/：]+（？）？
发生了什么事

提前感谢，
我通过在设置中的
安全列表中添加
html
和
body
来解决这个问题

const purgecss=require（“@fullhuman/postcss purgecss”）({
//指定项目中所有模板文件的路径
内容：[
//“./src/***.html”，
“./pages/***.vue”，
“./layouts/***.vue”，
“./components/***.vue”
],
安全列表：['html'，'body']，
//包括在此正则表达式中使用的任何特殊字符
defaultExtractor:content=>content.match（/[A-Za-z0-9-\:/]+/g）\\\\\[]
})

请注意您使用的purgecss版本（检查
package.json
）：
从
白名单模式
更改为
安全名单
，我花了一些时间才发现
我的Vue项目中有一套：

module.exports = {
  content: [
    "./src/**/*.vue",
  ],
  safelist: [
    "body",
    "html",
    "img",
    "a",
    "g-image",
    "g-image--lazy",
    "g-image--loaded",
    /-(leave|enter|appear)(|-(to|from|active))$/,
    /^(?!(|.*?:)cursor-move).+-move$/,
    /^router-link(|-exact)-active$/,
    /data-v-.*/,
  ],
  extractors: [
    {
      extractor: (content) => content.match(/[A-z0-9-:\\/]+/g),
      extensions: ["vue"],
    },
  ],
}

根据您所使用的PurgeCSS的版本，（我的版本是：
v3.1.3
），将
安全列表
用于排除模式，在旧版本中，您可能必须使用
白名单
。
在这里遇到同样的问题，您是否找到了@LeCoda解决方案？