Как настроить чтобы Purgecss с Tailwimd CSS через PostCss не удалял уникальные классы в квадратных скобках

Настроил Tailwind CSS в сборке Webpack, чтобы не тянулись служебные и лишние стили Tailwind установил PurgeCSS, по стандартным классам все нормально обрабатывает, но уникальные классы, к примеру "min-w-[16px]", удаляет, и приходится каждый такой класс добавлять в safelist.

Нашел в сети регулярку, которая должна подобные классы обрабатывать, но она не работает.

Конфиг PostCSS:

/* eslint-disable max-len */
const purgecss = require("@fullhuman/postcss-purgecss");
const cssnano = require("cssnano");
const isDev = process.env.NODE_ENV !== "production";

module.exports = {
   plugins: [
      require("tailwindcss"),
      isDev ? undefined : require("postcss-mq-keyframes"),
      isDev ? undefined : require("postcss-sort-media-queries"),
      isDev ? undefined : require("postcss-focus"),
      isDev ? undefined : cssnano(["default", {discardComments: { removeAll: true }, discardEmpty: true }]),
      purgecss({
         content: ["./src/pages/*.html", "./src/modules/*.js"],
         css: [],
         skippedContentGlobs: ["node_modules/**"],
         dynamicAttributes: [""],
         fontFace: false,
         keyframes: false,
         variables: true,
         rejected: false,
         rejectedCss: false,
         safelist: {
            standard: ["after:animate-[spin_10s_linear_infinite]", "after:rotate-[130deg]", "after:w-[75rem]", "after:md:h-[55rem]", "after:h-[30rem]", "after:rounded-[20rem]", "gap-[30px]", "h-[6px]", "w-[84%]", "py-[60px]", "mt-[10px]", "tracking-[1px]", "text-[22px]", "py-[30px]", "tiny-slide", "tns-item", "tns-inner", "tns-ovh", "tiny-three-item", "tns-slider", "tns-carousel", "tns-subpixel", "tns-calc", "tns-horizontal", "min-w-[340px]", "h-[34px]", "w-[75px]", "h-[25px]", "text-[#6b6b6b]", "bg-[url('assets/img/jpg/job.jpg')]", "text-[13px]", "-bottom-[2px]", "min-w-[16px]", "min-h-[16px]"],
            deep: [],
            greedy: [],
            keyframes: [],
            variables: []
         },
         defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
      })
   ],
};

Вот конфиг Tailwind:

/** @type {import('tailwindcss').Config} */

module.exports = {
   content: ["./src/pages/*.html"],
   darkMode: "class",
   important: true,
   theme: {
      screens: {
         xs: "540px",
         sm: "640px",
         md: "768px",
         lg: "1024px",
         xl: "1280px",
         "2xl": "1536px",
      },
      fontFamily: {
         nunito: ["'Nunito', sans-serif"],
      },
      container: {
         center: true,
         padding: {
            DEFAULT: "12px",
            sm: "1rem",
            lg: "45px",
            xl: "5rem",
            "2xl": "13rem",
         },
      },
      extend: {
         colors: {
            dark: "#3c4858",
            black: "#161c2d",
            "dark-footer": "#192132",
            "indigo-600/90": "#9D174D",
            "indigo-600": "#9D174D",
            "indigo-700": "#8C2773",
         },

         boxShadow: {
            DEFAULT: "0 0 3px rgb(60 72 88 / 0.15)",
            sm: "0 2px 4px 0 rgb(60 72 88 / 0.15)",
            md: "0 5px 13px rgb(60 72 88 / 0.20)",
            lg: "0 10px 25px -3px rgb(60 72 88 / 0.15)",
            xl: "0 20px 25px -5px rgb(60 72 88 / 0.1), 0 8px 10px -6px rgb(60 72 88 / 0.1)",
            "2xl": "0 25px 50px -12px rgb(60 72 88 / 0.25)",
            inner: "inset 0 2px 4px 0 rgb(60 72 88 / 0.05)",
            testi: "2px 2px 2px -1px rgb(60 72 88 / 0.15)",
         },

         spacing: {
            0.75: "0.1875rem",
            3.25: "0.8125rem",
         },

         maxWidth: ({ theme, breakpoints }) => ({
            1200: "71.25rem",
            992: "60rem",
            768: "45rem",
         }),

         zIndex: {
            1: "1",
            2: "2",
            3: "3",
            999: "999",
         },
      },
   },
};

Ответы (0 шт):