我有一个使用 Angular CLI 创建的 Angular 项目，所以我有 angular.json 文件用于配置构建。

我想集成 PurgeCSS，因为它似乎是减少 CSS 包大小的好工具。

在PurgeCSS 网站上，他们解释了如何与 Webpack 集成。我找到了一个教程，解释了如何添加自定义 webpack 与 Angular CLI 的集成。

有没有人有 PurgeCSS 与 Angular CLI 项目集成的成功例子？

我试图在通过 PurgeCSS 处理时保留所有 TailwindCSS 颜色类（即 bg-green、bg-red、text-green、text-red）。这些颜色类是在 CMS 中设置的，而不是在代码中设置的，因此我们无法搜索它们的代码，因为它们（全部）不存在于此处。

因此，我想使用PurgeCSS的白名单功能来保留所有以 'bg-' 或 'text-' 开头的类。但是，我下面的模式似乎并没有奏效？任何想法如何调整它？

whitelistPatterns: ['^bg\-', '^text\-'],

我将 Next.JS 与其他一些模块一起使用。其中之一，Megadraft，带有自己的 CSS。我不知道这是否相关，但我也使用 PurgeCSS。

在开发模式下一切正常，但 CSS 似乎在生产模式下中断。更明确地说，Megadraft 的所有类在生产模式中似乎都没有定义。检查器中的 HTML 节点仍然显示类在这里，但它们只是没有定义。

这是我在我的pages/_app.js文件中导入上述 CSS文件的方法：

// pages/_app.js
import "css/tailwind.css";
import "megadraft/dist/css/megadraft.css";

这是我的postcss.config.js：

// postcss.config.js
const purgecss = [
    "@fullhuman/postcss-purgecss",
    {
        content: [
            "./components/**/*.js",
            "./Layout/**/*.js",
            "./pages/**/*.js",
            "./node_modules/next/dist/pages/**/*.js",
            "./node_modules/next/dist/Layout/**/*.js",
            "./node_modules/next/dist/components/**/*.js"
        ],
        defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    },
];
module.exports = {
    plugins: [
        "postcss-import",
        "tailwindcss",
        "autoprefixer",
        ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
    ],
};

我正在使用 next ^9.4.4。可能值得注意的是 TailwindCSS 似乎工作得很好（在 dev 和 prod 中），但我认为这可能是因为它在 postcss 中用作插件......

以防万一，我将 webpack …

我正在尝试使用 purgecss 删除任何未使用的 css，尤其是 Bootstrap 中未使用的 css。使用 Purgecss 设置，我所有的 css 都被删除了，只保留了内联样式。这意味着 purgecss 正在删除所有 css 类的样式，而不仅仅是未使用的样式。我想让我的配置正确，以便只删除未使用的 css 样式。

由于我的 React 应用程序也使用 Post-css，我正在尝试使用postcss-purgecss插件，并按照该链接中的说明进行设置。

这发生在开发和生产模式中。

你可以在这个 github repo 的这个分支上测试这个问题

您可以在此 url https://purge-css-failing.netlify.app/查看发生的结果

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
        content: ['./src/**/*.html']
    }),
  ]
};

webpack.config.js

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
        content: ['./src/**/*.html']
    }),
  ]
};

我有一个带有 react-bootstrap、bootstrap 和 scss 设置的 gatsby 站点，我正在尝试清除未使用的 css。为此，我需要使用 purgeCss，但它在需要时不起作用。它似乎无法捕获我在页面中使用的 react-bootstrap 组件中的类。我阅读了文档，尝试了一些修复，但没有任何效果。有人能帮我吗 ？

对于 Tailwind 和 PostCSS/PurgeCSS 来说相当新，所以希望这是一个相当简单的修复。

在我的 中tailwind.config.js，我扩展了一些间距值，包括添加 0.5 值以与默认的 Tailwind 间距比例对齐。我的文件如下所示（摘录）：

module.exports = {
    important: false,
    theme: {
        spacing: {
            '0.5': '0.125rem',
        },
    },
}

然后我使用 PostCSS 编译我的 CSS，如下所示，你可以看到我使用了一堆效果很好的插件：

module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('postcss-import'),
        require('postcss-nested'),
        require('postcss-responsive-type'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano'),
    ]
}

到目前为止，一切都进展顺利！但是，我想清除 css 以删除 Tailwind 创建的所有未使用的实用程序类。这对我的 postcss 文件产生如下影响：

module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('postcss-import'),
        require('postcss-nested'),
        require('postcss-responsive-type'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')({
            content: [
                './*.php',
                './**/*.php',
            ],
            defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []
        }),
        require('cssnano'),
    ] …

我使用 PostCSS 在我的项目中包含 Tailwind CSS，并让 Tailwind 的内置 Purge 实现非常适合核心库（style.pcss如下所示）。但是，我也将其@tailwind/typography作为插件包含在内，并且它的选择器不会被清除。

// postcss.config.js

const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'), 
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : null
  ]
}

// tailwind.config.js

module.exports = {
  plugins: [
    require('@tailwindcss/typography')
  ],
  purge: [
    './build/*.html',
    './build/**/*.html'
  ],
}

// style.pcss

@tailwind base;
@tailwind components;
@tailwind utilities; 

由于某种原因，顺风在 next.js 中无法正确呈现。

我想知道我的设置是否有问题？

样式文件夹 - tailwind.css

@顺风基地；

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

....

_app.js

import React from "react";
// import "styles/global.scss";


import 'styles/tailwind.css'


import NavbarCustom from "components/Layout/NavbarCustom";
import Footer from …

问题陈述：

我有一个nextjs项目与tailwindcss. 在登录页面上，UI 在第一页加载时具有可用的必要类，但是如果我刷新页面，那么这些类就会从 DOM 中消失，并且 UI 会被破坏。

这是站点登录页面的部署链接

如何重现？

1. 打开上面给出的链接，您会发现登录表单 UI看起来不错。

2. Ctrl+ R（刷新页面），您会发现登录 UI现在已损坏

代码文件

tailwind.config.js

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    purge: {
        content:[
        './src/pages/**/*.js',
        './src/pages/**/*.ts',
        './src/pages/**/*.tsx',
        './src/design-system/**/*.js',
        './src/design-system/**/*.ts',
        './src/design-system/**/*.tsx',
        './src/components/**/*.js',
        './src/components/**/*.ts',
        './src/components/**/*.tsx'
    ],
    
    // options: {whitelist:['h-52', 'py-9', 'max-w-2xl', 'text-white', 'h-screen']}
},
    darkMode: false, // or 'media' or 'class'
    theme: {
        fontSize: {
            'xxs': '10px',
            'xs': '.75rem',
            'sm': '.875rem',
            'tiny': '.875rem',
            'base': '1rem',
            'lg': '1.125rem', …

我需要将所有边距值与相应的响应大小列入安全列表。

例子：

• 'mb-10'
• 'md:mb-10'
• 'xl:mb-10'

等等。

这是我现在拥有的内容，tailwind.config.js但它似乎不适用于响应变体：

safelist: [
    {
      pattern: /\-?m(\w?)-/,
    },
],

有没有一种简单的方法可以使用正则表达式模式来实现此目的，或者我是否需要任何其他特定配置？我当然希望避免手动列出它们。