No longer possible to define a custom background image and a background size to go with it?

[buffpojken]

In v3, it wsa extremely easy to define a custom background image along with the proper background size for it - which of course needs to be done when using svgs as icons or images, in a fashion similar to this:

module.exports = {
  ...,
  theme: {
    extend: {       
      backgroundImage: {
        'generic-file': 'url(../images/icons/generic-file.svg)'
      }, 
      backgroundSize: {
        'generic-file': '9px 14px'
      }, 
    },
  },
  ...
}

which could then be trivially referenced with bg-generic-file and ensure that the same icon is rendered at the same size everywhere.

As far as I can tell, this is no longer possible in v4?

I tried the following:

@theme{
  --background-image-main: url("img.jpg");
  --background-size-main: 20px 20px; 
}

but that doesn't work. I can make it work with declaring a separate utility as in:

@utility bg-main{
  background-size: 20px 20px;
}

but then the great benefits of ensuring they are referenced as one are lost.

It's of course possible to solve this as follows:

@utility bg-main{
  background-image: url("img.jpg");
  background-size: 200px 20px;
}

but then I loose the ability to reference the background-image as a theme-component at all?

Am I missing something fundamental here or is this a design choice in v4?

[wongjn]

There is no defining dynamic background-size utility classes via theme configuration but you can re-add it:

@utility bg-* {
  background-size: --value(--background-size-*)
}

This will make bg-main apply both background-size and background-image: https://play.tailwindcss.com/dlNRZW5crj?file=css

[buffpojken]

Thanks for the quick reply - that's actually exceedingly clever and was exactly what I was looking for. Thanks!