DEV Community

Paweł Kowalski for platformOS

Posted on

Background images in TailwindCSS - the clean and easy way

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 }})">
Enter fullscreen mode Exit fullscreen mode

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')"
}
Enter fullscreen mode Exit fullscreen mode

Now, our hero element HTML looks like this:

<section class="bg-accent-dark bg-cover bg-hero">
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (2)

Collapse
jfbrennan profile image
Jordan Brennan

Why wouldn't you just do:

.bg-hero { background-image: url(../images/home/hero.jpg) }
Enter fullscreen mode Exit fullscreen mode
Collapse
pavelloz profile image
Paweł Kowalski Author

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.