PurgeCSS 删除 next.js 中的 Tailwind 字体答案

【问题标题】：PurgeCSS removing Tailwind font in next.jsPurgeCSS 删除 next.js 中的 Tailwind 字体
【发布时间】：2020-12-31 09:12:32
【问题描述】：

我正在构建一个使用如下特定文本的 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] : [])
    ]
  };

发生了什么事？

提前致谢，

【问题讨论】：

在这里遇到同样的问题，@LeCoda 找到解决方案了吗？

标签： reactjs next.js tailwind-css css-purge

【解决方案1】：

我可以通过将html 和body 添加到设置中的safelist 来解决此问题。

const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: [
    // './src/**/*.html',
    './pages/**/*.vue',
    './layouts/**/*.vue',
    './components/**/*.vue'
  ],
  safelist: ['html', 'body'],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

注意您拥有的 purgecss 版本（检查 package.json）：从whitelistPatterns 到safelist 发生了变化，我花了一些时间才发现

【讨论】：

【解决方案2】：

我的 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），safelist 用于排除模式，在旧版本中您可能必须改用 whitelist。

【讨论】：