Using images from the asset pipeline

[atimmer]

It would be useful for a Tailwind + Rails integration to include a way to use images from the asset pipeline. As far as I know it's not possible to use asset-url in any of the locations relevant to tailwind:

1. In the application.tailwind.css as a custom utility: This half-works, as asset-url is put in the tailwind.css output file. However, the asset pipeline ignores it because it isn't processed. Maybe I can enable this somehow?
2. In the html.erb file as an 'arbitrary value'. This doesn't work because Tailwind classes need to be hardcoded for automatic purposes.
3. In the tailwind.config.js. Doesn't work because the file has no relation to the asset pipeline at all.

I feel like 1. should be the 'intended' solution. However, I don't have enough knowledge of neither Rails nor the asset pipeline to write a PR for this. If someone provides me with pointers I can try creating a PR that makes it work.

There are two workarounds. The first is putting your images in the public/assets folder. However that means throwing away the advantages of the asset pipeline, including fingerprinting of the images allowing long cache times. The second is maintaining a separate CSS file that is solely responsible for images. That's not ideal, because it's confusing why you would have two CSS outputs even though you're using Tailwind. And you can't use Tailwind's after:, before:, hover:, etc.

StackOverflow question asking the same thing: https://stackoverflow.com/questions/66842651/inserting-a-background-image-from-asset-pipeline-with-tailwind.

[dhh]

url() is rewritten automatically since rails/sprockets-rails#476 👍

[atimmer]

Awesome! I'll definitely answer the StackOverflow question with the solution. Do you think this should also be documented in the README of this project? Or is this something that will eventually be 'standard practice'?

[dhh]

I'd be happy seeing a note in the README about it 👍