Как настроить чтобы 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",
},
},
},
};