My biggest issue with TailwindCSS was the ugly way of using background images with it. I had to inline background-url
property and it was not clean. And I know I was not alone, because other frontend developers said the same thing. It looked similar to this:
<section class="bg-accent-dark bg-cover"
style="background-image: url({{ 'images/home/hero.jpg' | asset_url }})">
Note: We use liquid to generate url to an image placed on CDN.
Couple days ago, when I was doing six different themes in TailwindCSS using six different configs (I will report my findings in another article) I discovered that it can be simplified. Because CSS file is also on CDN, and the background-image can be customized in TailwindCSS config (read more), it can be replaced with simple bg-hero
after adding its definition into theme extend section:
backgroundImage: {
'hero': "url('../images/home/hero.jpg')"
}
Now, our hero element HTML looks like this:
<section class="bg-accent-dark bg-cover bg-hero">
And I think its much cleaner! Reading documentation paid off :)
Read more
If you are interested in more performance oriented content, follow me and I promise to deliver original, or at least effective methods of improving your website.
![platformOS](https://res.cloudinary.com/practicaldev/image/fetch/s--l3LNsE6N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--XQubx9HX--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/organization/profile_image/2088/97099ebb-ac3a-457d-ac1a-d2b6aafef79e.png)
![](https://res.cloudinary.com/practicaldev/image/fetch/s--l5wkmzn0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--dz8eofez--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/51061/c37084eb-e6b7-479b-8779-10e8af07b8cc.jpg)
Top comments (3)
Because with TailwindCSS (and especially when doing six different themes with one set of CSS files) I want to keep my CSS untouched as much as possible - having those definitions in config means those definitions will be generated per theme and included only the one needed for particular theme.
So two reasons: It's tailwind way and themes constrains make it easier to mantain later.
I have done my bg images in the same manner, but I'm curious, how would you implement webp images AND your default images that do not support webp. I was looking for the best approaches to this and didn't find a clean answer yet. Perhaps you do?
Thats a good question, especially now that WEBP/AVIF is getting traction.
I dont have the universal answer yet, but in case you use Cloudflare (or any other CDN that provides user-agent-based image optimization) you can turn that on.
![CF Polish](https://res.cloudinary.com/practicaldev/image/fetch/s--7mdL4sm_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7qfsus1siq8m8hb8d4h.png)
I know imgix (and probably a lot more cdns) has something similar, with transformations inside the url.
Of course thats not applicable for every website but I've noticed a lot of websites are using CDN with that feature.
Another way of doing it, which i probably wouldnt ever do for images above-the-fold is:
data-src="{ jpeg: 'example.com/cat.jpeg', webp: 'example.com/cat.webp' }"
of an element<noscript>
as a fallback just in case JS fails/is not present