Stack Overflow
Stack Overflow

Questions tagged [css-purge]

A CSS tool written in Node JS as a command line app or library for the purging, burning, reducing, shortening, compressing, cleaning, trimming and formatting of duplicate, extra, excess or bloated CSS.

More information here: https://www.npmjs.com/package/css-purge

90 questions
4
votes
1 answer

How to deal with Tailwind & PurgeCSS and A LOT of different folders?

I've been using Tailwind with the "Purge" option to make the final css file a lot smaller and successfully. However, I've been wondering about the efficience of my methods. I'm working on projects that have got a lot of subfolders, which I all…
Nina van Es
  • 53
  • 5
4
votes
1 answer

PurgeCSS: How to define path to all subdirectories?

The basic postcss.config.js looks like this const purgecss = require('@fullhuman/postcss-purgecss') module.exports = { plugins: [ purgecss({ content: ['./**/*.html'] }) ] } I have a situation where I need to define the path to a…
Sr. Schneider
  • 647
  • 10
  • 20
4
votes
2 answers

PurgeCSS removing Tailwind font in next.js

I have a next.js site I am building that uses a specific text as below, const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { theme: { extend: { fontFamily: { sans: ['SFMono-Regular', 'Menlo',…
LeCoda
  • 538
  • 7
  • 36
  • 79
4
votes
1 answer

react-bootstrap + purgeCss + next.js

PurgeCss removes react-bootstrap css classes used in my project. I am using Next.js framework. _app.js: import '../styles/style.scss'; import React from 'react'; import PropTypes from 'prop-types'; import 'bootstrap/dist/css/bootstrap.min.css'; //…
bobo
  • 63
  • 1
  • 5
4
votes
1 answer

Gulp - How to remove duplicated styles in individual css files, If they have already present in common css file

How to remove duplicated styles in individual css files, If they already present in common.css file. common.css file has below styles. .nav { background-color: red; } home.css has below styles. .nav { background-color: red; } .home { …
Pioter
  • 465
  • 3
  • 8
  • 21
4
votes
1 answer

How to use CSS-Purge to remove duplicates and NOT lose comments or formatting?

How can I use CSS-Purge to clean up my code, without losing my comments and all formatting in my css file? Thanks :)
James Pyle NewYears1978
  • 41
  • 3
3
votes
1 answer

How to extract unused CSS/JS (not just purge) into a separate file?

My goal is to eliminate render-blocking CSS and JS on a website. Google suggests to identify the used CSS/JS via coverage, and move that code from the render-blocking URL to an inline script tag in your HTML page. When the page loads, it will have…
Houman
  • 64,245
  • 87
  • 278
  • 460
3
votes
0 answers

What to use as PurgeCSS extractor for Tailwind 3?

What to use as PurgeCSS extractor for Tailwind 3? With Tailwind 2 we could have used a default extractor that they made available in an internal file, but it was not a public API and in fact it is gone now:…
Fred Hors
  • 3,258
  • 3
  • 25
  • 71
3
votes
2 answers

How to use purgeCSS in create-react-app to remove unused css and javascript

I have a single-page application build with create-react-app. I'm using various npm packages such as antd, reactstrap etc. There is a lot of unused CSS and javascript which is slowing my application down. I read about purgeCSS implementation in…
era s'q
  • 537
  • 1
  • 7
  • 27
3
votes
1 answer

PurgeCSS ignore regex in whitelistPatterns and remove TailwindCSS classes (on NuxtJS)

I'm using NuxtJS (VueJS) with TailwindCSS and PurgeCSS. Until now, I was specifying complete CSS classes for colors like text-green-800, bg-red-400, etc. But when creating component it's not ideal while the color can be passed as a Prop, but it's…
Zetura
  • 446
  • 5
  • 12
3
votes
0 answers

Using purgeCss with nextJs css modules

I am trying to use purgeCSS with my nextJs installation. So i am following this tutorial: https://purgecss.com/css_modules.html However when I add that bit of code to my postcss.config.js I get the following when I try build: > Build error…
strangeQuirks
  • 4,761
  • 9
  • 40
  • 67
3
votes
1 answer

PurgeCSS ignore all width and responsive width classes in TailwindCSS

I want to ignore all classes started with w- and all breakpoint width classes like lg:w- in Tailwind Utility classes. This is what I did in my tailwind.config.js file: purge: { options: { whitelistPatterns: [/^w-/] } }, But it…
user1012181
  • 8,648
  • 10
  • 64
  • 106
3
votes
1 answer

custom default styles have been removed by PurgeCSS in nuxt-tailwindcss

In my SSR Nuxt.js project, I am using Nuxt offical tailwindcss-module I coded a default style for tags like below. /assets/scss/app.scss a{ color: color("blue", "base"); transition: color .3s ease; &:hover,&:active{ …
DengSihan
  • 2,119
  • 1
  • 13
  • 40
2
votes
0 answers

Removing unused redundant css from react project

i'm working on a react project with sass modules, and over the time a lot of unused and redundant css has piled up, now i have lots of styles.module.scss files with over a 1000 lines pf css each, and i think around 70% of these are not used any…
sudofix
  • 63
  • 2
  • 5
2
votes
0 answers

using arbitrary width pixels not working when deployed on prod tailwind css, postcss, next

using specific pixel width (e.g. w-[50px]) with tailwind CSS and nextjs but when deployed to production (on Vercel) the specified width doesn't show up, locally it works fine. Is there something wrong with my posts configuration that's causing it to…
user3226932
  • 2,042
  • 6
  • 39
  • 76
1
2
3 4 5 6