From f08acabe53c45227ba3e6582fe2c617e1f7b2ea1 Mon Sep 17 00:00:00 2001 From: Anton Timmermans Date: Sat, 5 Feb 2022 15:04:14 +0100 Subject: [PATCH 1/2] Add a note about using asset pipeline assets --- README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/README.md b/README.md index 3e3b6247..fe8425c4 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,27 @@ A fix for this has been proposed upstream at https://github.com/tailwindlabs/tai apk add build-base gcompat ``` +### Using asset-pipeline assets + +To use assets from the asset pipeline one would normally use `asset-url`. This doesn't work with Tailwind, as the CSS is not processed with sass. Instead use `url(image.svg)`, [since Sprockets v3.3.0](https://github.com/rails/sprockets-rails/pull/476) the URL will automatically be rewritten. In Tailwind this looks like this: + +```js +module.exports = { + theme: { + extend: { + backgroundImage: { + 'image': "url('image.svg')" + } + } + } +} +``` + +The inline version also works: + +```html +
Has the image as it's background
+``` ## License From 53c07f0398c93202bd2139fd032098cdef32b2d8 Mon Sep 17 00:00:00 2001 From: Anton Timmermans Date: Mon, 28 Feb 2022 14:12:09 +0100 Subject: [PATCH 2/2] 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. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fe8425c4..19d33d82 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ apk add build-base gcompat ### Using asset-pipeline assets -To use assets from the asset pipeline one would normally use `asset-url`. This doesn't work with Tailwind, as the CSS is not processed with sass. Instead use `url(image.svg)`, [since Sprockets v3.3.0](https://github.com/rails/sprockets-rails/pull/476) the URL will automatically be rewritten. In Tailwind this looks like this: +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 = {