Some classes don't work on Heroku after upgrade from 3.1.4 to 3.4.17

[Kinselan]

With Tailwind 3.1.4, active:duration is not yet supported, so I need to upgrade.

When I upgrade to Tailwind 3.4.17, active:duration classes work.

After the upgrade, bg-gradient-to-r (and -l, -b, etc.) classes work locally, but they do not work in production once pushed to Heroku. (The entire background color is transparent).

On Heroku, the classes still appear in the browser list of classes, and the colors all exist in the styles tab, but the elements with these classes applied appear entirely transparent.

[bella964]

Hello,

PurgeCSS Configuration
Tailwind uses a purge mechanism in production to remove unused CSS classes, reducing file size. If the gradient classes (bg-gradient-to-) are dynamically generated or not explicitly listed in your HTML/JSX files, they may be incorrectly purged.
Solution: Ensure your tailwind.config.js includes all paths where your classes are used. For example:
javascript HMH Smart Square Login
module.exports = {
content: [
'./src/**/.{html,js,jsx,ts,tsx}',
'./public/index.html', // Adjust paths as per your project structure
],
theme: {
extend: {},
},
plugins: [],
};
If you are dynamically generating classes, use the safelist option:
javascript
module.exports = {
safelist: [
'bg-gradient-to-r',
'bg-gradient-to-l',
'bg-gradient-to-b',
'bg-gradient-to-t',
'from-blue-500',
'to-green-500',
],
};
2. Build Process
Verify that Tailwind CSS is building properly on Heroku.
Solution: Ensure the post-install scripts or build scripts in your package.json are correct. For example:
json
"scripts": {
"build": "tailwindcss build src/input.css -o dist/output.css"
}
Run the build command locally to confirm that the output includes the gradient classes.
3. Node Environment
Tailwind behaves differently depending on the NODE_ENV. It optimizes and purges classes when NODE_ENV=production.
Solution: Verify that your production environment is correctly set. For example, in Heroku:
bash
heroku config:set NODE_ENV=production
4. Gradient Support in Tailwind
Gradients are supported in Tailwind by default, but custom colors used in from-* and to-* classes may need to be extended in your tailwind.config.js.
Solution: Ensure all colors referenced in your gradients are defined in your Tailwind config or use Tailwind's default color palette:
javascript
theme: {
extend: {
colors: {
customBlue: '#1e40af',
customGreen: '#16a34a',
},
},
}
5. Caching Issues
Heroku's asset pipeline might be caching outdated stylesheets.
Solution: Clear your cache on Heroku:
bash

heroku repo:purge_cache -a your-app-name
git push heroku main
6. Browser DevTools
Since the classes appear in the browser, inspect the computed styles in the DevTools. Check:
Whether the gradient is being overridden by other CSS.
If background-image is computed as none or not.
Solution: If styles are overridden, increase specificity or adjust your CSS.

Best Regards

[Kinselan]

Thanks for your reply.

Regarding #6, I do see background-image as being 'none'. However, the custom colors are defined in Tailwind config, they show in the styles tab, so I don't know why it is being overwritten (or not seeing the colors)? It doesn't seem that changing the specificity will help as I can't see that anything is overriding the classes. I've attached a new screenshot to show what I see:

[wongjn]

You seem to have some over optimization in your CSS. There are some Tailwind default CSS variables that are applied to every element that are needed for certain utility classes to work. Some of these default CSS variables are missing from your CSS.

In your CSS, you have:

*, ::after, ::before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scroll-snap-strictness: proximity;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246/0.5);
  --tw-ring-offset-shadow: 0 0 transparent;
  --tw-ring-shadow: 0 0 transparent;
  --tw-shadow: 0 0 transparent;
  --tw-shadow-colored: 0 0 transparent;
}

Contrast this with a working version in Tailwind Play:

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

[Kinselan]

Any idea how that happened, or how I might fix it? It's been working in development (and production) for years. I thought it might be a heroku problem even...