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
56
votes
34 answers

Tailwindcss not working with next.js; what is wrong with the configuration?

For some reason, tailwind is not rendering properly in next.js. I'm wondering if something is wrong with my settings? Styles folder - tailwind.css @tailwind base; /* Write your own custom base styles here */ /* Start purging... */ @tailwind…
LeCoda
  • 538
  • 7
  • 36
  • 79
17
votes
5 answers

purgecss can't recognize conditional classes

So I'm using TailwindCSS for a WP theme I'm developing. I ran into an issue in creating the production grade theme files because, from how I understand the problem, purgecss can't recognize conditional classes used on template parts. For example,…
zero
  • 1,605
  • 3
  • 15
  • 24
17
votes
4 answers

How to integrate PurgeCSS with Angular CLI project

I have an Angular project created with Angular CLI, so I have angular.json file for configuring the build. I wanted to integrate PurgeCSS as it seems to be a great tool to reduce the size of our CSS bundle. On PurgeCSS website, they explain how to…
Tonio
  • 4,082
  • 4
  • 35
  • 60
13
votes
6 answers

PurgeCSS whitelist patterns with TailwindCSS

I am trying to preserve all TailwindCSS colour classes (i.e bg-green, bg-red, text-green, text-red) when it is processed via PurgeCSS. These colour classes are set in the CMS rather than code so we cannot search the code for them as they don't (all)…
dungey_140
  • 2,602
  • 7
  • 34
  • 68
11
votes
1 answer

Purge-css is removing all css stylings instead of just the unused ones

I'm trying to use purgecss to remove any unused css, particularly the unused css from Bootstrap. With Purgecss setup, all my css is being removed, and only inline styling remains. This means purgecss is removing the styling for all css classes, not…
Sam
  • 1,765
  • 11
  • 82
  • 176
9
votes
1 answer

PurgeCSS with React-bootstrap possible?

I have a gatsby site with react-bootstrap, bootstrap and scss setup and I am trying to clear my unused css. For this I need to use purgeCss, but It doesn't work as it's needed. It seems it can't catch the classes in react-bootstrap components I am…
George Milev
  • 103
  • 3
8
votes
1 answer

NextJS with global CSS import fail in production mode

I'm using Next.JS with a few other modules. One of them, Megadraft, comes with its own CSS. I don't know if this is relevant, but I also use PurgeCSS. Everything works fine on development mode, but the CSS seems to break in production mode. To be a…
Thanh-Quy Nguyen
  • 2,995
  • 7
  • 30
  • 46
7
votes
1 answer

PurgeCSS and Tailwind CSS, how to preserve responsive classes using the Command Line Interface?

I have the "full" 3.9 MB Tailwind CSS file and successfully applied PurgeCSS to reduce it to 9 kB. But it also purged all responsive classes like md:px-6, they don't show up in my purged version. Note: this question is for using the command line…
Tristan Bains
  • 123
  • 2
  • 7
6
votes
3 answers

NextJs Tailwind build (purge) removes all styling

In my current NextJS project, I am using Tailwind as a CSS framework. When I run yarn dev, everything works fine, but whenever I run yarn build followed by a yarn start, all of my CSS seems to be purged as the layout of my page is completely…
Jonathan Lauwers
  • 255
  • 2
  • 3
  • 8
6
votes
2 answers

TailwindCSS / PurgeCSS extractor string removing some classes

fairly new to Tailwind and PostCSS/PurgeCSS, so hoping this is a fairly simple fix. In my tailwind.config.js, I am extending some of the spacing values, including adding a 0.5 value to align with the default Tailwind spacing scale. My file looks…
dungey_140
  • 2,602
  • 7
  • 34
  • 68
5
votes
1 answer

How to config Scss and purgeCss in Next js custom postCSS config

I am using Scss and Bootstrap for designing my project. In order to remove unused Css with purgeCss , I have customized my postcss.config.js file like this: module.exports = { plugins: [ "postcss-flexbugs-fixes", [ …
Moein Moeinnia
  • 1,945
  • 3
  • 10
  • 26
5
votes
4 answers

Tailwind classes not working after page refresh in production

Problem Statement: I have a nextjs project with tailwindcss. On the login page, the UI has the necessary classes available on the first page load, but if I refresh the page then the classes go away from the DOM and the UI is broken. This is the…
Vikrant Bhat
  • 2,117
  • 2
  • 14
  • 32
5
votes
1 answer

How to get Tailwind's built-in CSS Purge to purge plugin CSS

I'm including Tailwind CSS in my project using PostCSS, and have Tailwind's built-in Purge implementation working great for the core library (in style.pcss below). However, I am also including @tailwind/typography as a plugin and its selectors…
Kevin Lewis
  • 1,070
  • 3
  • 10
  • 18
4
votes
1 answer

How do I use PurgeCSS with Next.js and module.scss files?

I've got component level .scss files (filename.module.scss) and I want to purge unused css from these files. Since the styling classnames get hashed. I was wondering how I can get purgeCSS to work with a next.js app that uses module.scss files for…
TigerCode
  • 315
  • 3
  • 15
4
votes
1 answer

Safelist all margin values with screen variants in Tailwind

I need to safelist all margin values with the respective responsive sizes. Example: 'mb-10' 'md:mb-10' 'xl:mb-10' and so on. Here is what I have right now in my tailwind.config.js but it doesn't seem to work for the responseive variants: safelist:…
Dim13i
  • 1,961
  • 1
  • 17
  • 20
1
2 3 4 5 6