Can't disable CSS purging

[rbeer]

Hi!

I'm trying to disable CSS purging during development. I'm using the Chromium developer tools as a sort of WYSIWYG editor. The list of suggestions in the image below is populated with all the available CSS classes. Purging naturally strips that list down to those classes that are actually in the markup/code. Since this is for playing around with styling I haven't added to the files yet, I would need an unpurged version.

I've tried to simply set purge: false in the tailwind.config.js, but that gets me the webpack error

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!./src/styles/main.css
TypeError: Cannot read properties of undefined (reading 'filter')

Setting purge: [] just removes all classes.

The object declaration

purge: {
    enabled: false,
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
  },

behaves like using an Array, where everything is stripped when content is a filter that finds nothing (e.g. empty). enabled is completely ignored. So is the NODE_ENV variable. Accodring to the tailwind documentation (last paragraph), purging should in general only happen when NODE_ENV === 'production'. Checking directly in tailwind.config.js shows NODE_ENV === 'development', though.

Any ideas how I can disable purgin at all, when NODE_ENV === 'development'?

[rbeer]

Read @ixartz 's answer below, before you do this!

purge: false goes into the postcss.config.js!

Change

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

to

module.exports = {
  plugins: {
    tailwindcss: { purge: process.env.NODE_ENV !== 'development' },
    autoprefixer: {}
  }
};

and it works as expected.

[ixartz]

Hi @rbeer,

I have enabled Tailwind in JIT by default on this boilerplate code: https://github.com/ixartz/Next-js-Boilerplate/blob/master/tailwind.config.js#L2

That is why all classes aren't generated in development mode.

Without JIT, tailwind CSS is extremely slow to build.

Depend on your context you either follow your solution or you can just remove the Tailwind JIT mode https://github.com/ixartz/Next-js-Boilerplate/blob/master/tailwind.config.js#L2

Hope that helps.

[rbeer]

Have you tried that? I had removed the mode: 'jit' entry from tailwind.config.js, but that didn't help, either.

[ixartz]

Yes, I have tried on my computer and it works perfectly. Exactly what you have in your screenshot.

Maybe it's related to the Next JS cache. You need to delete .next folder in your project to make it work.

[rbeer]

Yes, indeed. Just tried again; must have forgotten to clean, when I did that earlier. My bad.

Ok, now I get it. When setting options in postcss.config.js, it completely overrides whatever is in tailwind.config.js. When I add mode: 'jit' to my "solution", it fails again.

Works for me without JIT, though. I'm not changing the classes themselves that much.

Thanks for your help! :hugs:

[ixartz]

No problem, I also have been tricked several time by the .next cache. 🥲

Great! It helps.