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.

Using WebP in Your Existing Webpage

Paweł Kowalski for platformOS ・ Nov 17 '20

#webperf #design

Optimizing Images For The Web

Paweł Kowalski for platformOS ・ Apr 24 '20

#beginners #node

3 Tips on Preserving Website Speed

Paweł Kowalski for platformOS ・ Jun 24 '20

#webperf #webpack #javascript #css