Tailwind v1.4 with Next.js purging my entire CSS

[deadcoder0904]

My earlier setup was working but had 1 issue. It was purging some text-utilities like text-pink-500 my website was using. So I decided to upgrade it. I followed https://statickit.com/guides/next-js-tailwind to add Tailwind support to Next.js

Now I deleted postcss.config.js & added the purge property to tailwind.config.js:

module.exports = {
  purge: ['./components/**/*.js', './pages/**/*.js'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

For reference my styles.css is as follows:

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;

as the above guide mentioned. Rest is also same as the Statickit guide. Not sure why it isn't working?

process.env.NODE_ENV is also set to production when I do yarn build which triggers next build

[deadcoder0904]

Added postcss.config.js back again with the following contents:

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

& it worked.

But unfortunately, it drops text-color utilities which I'm using.

Note: I'm using it as a dynamic prop

For example,

const Item = (color = 'yellow') => {
   return <div className={`text-${color}-500`}>...</div>
}

[TheAlexLichter]

This is normal because text-yellow-500 isn't included as full string in your files. See https://tailwindcss.com/docs/controlling-file-size/#writing-purgeable-html

[deadcoder0904]

Jeez I skimmed through it. Didn't read it actually. Thanks got it 👍

[deadcoder0904]

Did the following & it worked:

module.exports = {
  purge: {
    content: ['./components/**/*.js', './pages/**/*.js'],
    options: {
      whitelist: ['text-pink-500', 'text-yellow-500'],
    },
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

@adamwathan Is this the way of doing it for dynamic props?