Update to Tailwind v1.4 which bakes-in Purge CSS support

[deadcoder0904]

Thank you for https://statickit.com/guides/next-js-tailwind

I followed it many times. Tried updating but Purge CSS deletes my CSS. Mind updating the guide?

[deadcoder0904]

Found the solution 🎉

Some changes required in the guide:

2. Install dependencies

Don't need to add @fullhuman/postcss-purgecss

npm install tailwindcss autoprefixer --save-dev

3. Configure the build pipeline

It becomes

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

6. Generate tailwind.config.js & add purge property

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

Reference: https://github.com/tailwindcss/tailwindcss/pull/1639

[jonrh]

Thanks @deadcoder0904, worked like a charm! At the time of writing I had no need for whitelisting so the following minimal config was enough:

tailwind.config.js

module.exports = {
  purge: {
    content: ['./components/**/*.js', './pages/**/*.js'],
  }
};