Can't disable CSS purging

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'?

[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.

[ixartz]

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

Great! It helps.