Skip to content

Commit

Permalink
Add a note about using asset pipeline assets (#140)
Browse files Browse the repository at this point in the history
* Add a note about using asset pipeline assets

* Rewrite note about using assets from the pipeline

Clarify how it works so readers don't have to open the Sprockets PR.
Also remove any mention of how it used to work, this should be an
evergreen README comment.
  • Loading branch information
atimmer committed Mar 10, 2022
1 parent ddd757a commit f28ea82
Showing 1 changed file with 21 additions and 0 deletions.
21 changes: 21 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,27 @@ A fix for this has been proposed upstream at https://github.com/tailwindlabs/tai
apk add build-base gcompat
```

### Using asset-pipeline assets

In Rails, you want to use [assets from the asset pipeline to get fingerprinting](https://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark). However, Tailwind isn't aware of those assets. To use assets from the pipeline, use `url(image.svg)`. [Since Sprockets v3.3.0](https://github.com/rails/sprockets-rails/pull/476) `url(image.svg)` will then automatically be rewritten to `/path/to/assets/image-7801e7538c6f1cc57aa75a5876ab0cac.svg`. So the output CSS will have the correct path to those assets.

```js
module.exports = {
theme: {
extend: {
backgroundImage: {
'image': "url('image.svg')"
}
}
}
}
```

The inline version also works:

```html
<section class="bg-[url('image.svg')]">Has the image as it's background</section>
```

## License

Expand Down

0 comments on commit f28ea82

Please sign in to comment.