Rails6 - PurgeCSS ignores styles from image_pack_tag

Question

I'm following the TailwindCSS screencasts, railsifying them as I go.

I have uncommented the image_pack lines in a/j/p/application.js:

const images = require.context('../images', true)
const imagePath = (name) => images(name, true)

and can successfully pull images from a/j/images/ using image_pack_tag in an erb file.

however, when I use purgecss on the resulting files, purgecss does not keep the css classes need to properly style the image.

For example, a static image link works:

<img src="/images/beach-work.jpg" class="mt-6 rounded-lg shadow-xl">

but when accessed via image_pack_tag:

<%= image_pack_tag "beach-work.jpg", class: "mt-6 rounded-lg shadow-xl" %>

styling is not retained.

How should I fix this?

Answer 1

You can do a few things:

• whitelist the classes in purgecss options

whitelist: [
  'mt-6',
  'rounded-lg',
  'shadow-xl'
]

• add a commented out static version of the code. This worked in slim for me, erb for your example should be:

<%# <img src="" class="mt-6 rounded-lg shadow-xl"> %>