Tailwindcss: removeDeprecatedGapUtilities breaks output css build

[nikolasveneti]

Describe the problem:

When building including the future:

  ...
future: {
    removeDeprecatedGapUtilities: true,
  },
...

the messages below are injected into build without being commented which breaks the CSS file.

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.

When not using the key at all:

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes

Is this an intentional move to warn people?
I'm pretty sure there must be a better way than doesn't break the possibility to automate.
Of course you can remove the injected lines but then again, that's not automation.

If it's a bug, glad to help you investigate further.

Great job with the library, keep it up.

Link to a minimal reproduction:

Fresh create-react-app with [email protected]

[canvural]

I have the same issue with Hugo - static site generator. I asked about it here and here.

And in my case, this doesn't happen if I use npx tailwindcss build assets/css/site.css -o output.css to compile the CSS.

[adamwathan]

Weird! I don't know why the log output would be captured — are you piping the output of Tailwind's build command into something manually or something? Either way an actual GitHub repo that reproduces would be helpful for me to fix, create-react-app doesn't support Tailwind out of the box so I am not sure how you have it set up.

[geeksareforlife]

This is also happening for me (I should have checked here first before commenting on twitter, sorry!

My repo: https://github.com/geeksareforlife/geeksareforlife.com

This is a Hugo site and as far as I know I am not piping the output anywhere!

[canvural]

@geeksareforlife Just FYI, if you want a workaround, for now, you can set JEST_WORKER_ID environment variable in your Netlify site environment settings. This will stop generating the logs and the CSS will be fine. I'm using this trick until I find a good solution.

[geeksareforlife]

@canvural thank you, I will try that after dinner :) I have rolled back Tailwind for now

[geeksareforlife]

Works a charm, thank you!

[adamwathan]

This should be fixed in v1.7.3 👍

[daletom]

Hey @adamwathan I am still getting this and I am on v1.7.3

It's happening on this repo: https://github.com/daletom/nuxtjs-ecomm

[daletom]

I actually figured this out. I just made a tailwind.config.js file and put this in it:

module.exports = {
    future: {
      removeDeprecatedGapUtilities: true,
    },
}

It's working here: https://github.com/daletom/nuxtjs-ecomm/blob/master/tailwind.config.js

[jamesdamild]

I still have this warning

after updating the package to "tailwindcss": "1.8.10", also

added module.exports = {
  future: {
    purgeLayersByDefault: true
  }
}

how do I fixed this ? thanks

[adamwathan]

Add removeDeprecatedGapUtilities to your config like the error explains:

added module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  }
}

Read the documentation that is linked in the error:

https://tailwindcss.com/docs/upcoming-changes