tailwind.config.js

const IS_DEV = process.env.NODE_ENV === 'development';

let environmentSafelist = [];
if (IS_DEV) {
  environmentSafelist.push({
    pattern: /.+/, // allow everything
  });
}

module.exports = {
  content: [
    "./index.html",
    "./app/**/*.{hbs,js,html}"
  ],
  safelist: [
    'active',
    ...environmentSafelist
  ]
}

This allow all classes to exist in development. This is useful for changing classes in the browser dev tools and seeing the result live.

Noice! My work will want this.

Cc @Alonski

This is a great idea!

Saying that, the dangerous thing here is that development and production will now be using a different config.
So we could test things locally and everything works.
Push to production and colors are missing, pixels are off etc.
Of course this can be caught in the PR review but it will be much harder I believe.
We could add this as an env flag though to be passed into ember s if someone wants to use it.

That is a good point. I updated the gist to only change for dev, not test. I like to use Percy for visual diff testing and that would have a reasonable chance of catching issues like this.

Yea I'm with you. Unfortunately, Percy doesn't work for companies that only allow self hosted services because of security reasons.
I wish there was a good self hosted solution.

I built a self-hosted visual diff testing solution at Groupon. It's work, but doable.

I also wish there was a battle-tested open source solution for this.

There is this https://github.com/garris/BackstopJS