Support for bg-repeat-[<value>] under V4.

[ArpadGBondor]

I'm trying to control the repeat of multiple background images, but it seems that bg-repeat-[] does not work, and the provided bg-repeat classes only control a single background image.

[rozsazoltan]

By default, arbitrary values are not available for the bg-repeat-* utility, see:

• https://tailwindcss.com/docs/background-repeat

It can be implemented without it, by the way (though I understand the purpose of the question nonetheless):

• https://play.tailwindcss.com/eBN95ccAUS

It can be enabled afterwards like this:

@utility bg-repeat-* {
  background-repeat: --value([*]);
}

Now you can add an arbitrary list when using multiple backgrounds:

<div class="
  bg-[url(./favicons/favicon-16x16.png?v=3),url(https://tailwindcss.com/_next/static/media/clouds.c33e2404.svg)]
  bg-repeat-[no-repeat,repeat-x]
"></div>

• https://play.tailwindcss.com/19IWplkV7F

Another option is to extend the current names (round, x, y, ...) in the following way:

@theme {
  --bg-repeat-custom: no-repeat, repeat-x;
}

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

<div class="
  bg-[url(./favicons/favicon-16x16.png?v=3),url(https://tailwindcss.com/_next/static/media/clouds.c33e2404.svg)]
  bg-repeat-custom
"></div>

• https://play.tailwindcss.com/r4NrcyvQQb

But the two solutions can also be combined:

@utility bg-repeat-* {
  background-repeat: --value(--bg-repeat-*, [*]);
}