Tailwindcss: Utility Request: background-repeat

[pxwee5]

I believe the background-repeat utility is missing. Any specific reason why it is not included?

[adamwathan]

No specific reason, just haven't gotten around to discussing it yet. What values do you think are smart to include by default? I'm thinking at least bg-repeat and bg-no-repeat but not sure if the others are commonly used enough to justify including by default.

[benface]

I would like at least bg-repeat-x and bg-repeat-y. I personally don't care about the space and round values and don't think they're commonly used.

[pxwee5]

Well, for starters it is a fail safe when used with background-position: center.

Also in practise, a quick way to always make your content responsive for all screen sizes were background: no-repeat center / cover, which translates to:

background-repeat: no-repeat;
background-position: center;
background-size: cover; // or contain

So I think we still need this utility.

I'll leave the class syntax for you to decide since I haven't got around to fully understand Tailwind's syntax standards yet.

[sorinr]

The implicit value is repeat so bg-repeat its not so useful. In a situation when you dynamically want to change a background (bg-no-repeat) into a repeat you just remove that class. I agree with @benface for the bg-repeat-x and bg-repeat-y and ofc bg-no-repeat its a must in my opinion

[adamwathan]

The implicit value is repeat so bg-repeat its not so useful.

Actually this means it's mandatory to include if we have any background-repeat utilities, otherwise there is no way to get back to a default state at larger screen sizes.

So I think the four we should add are:

bg-no-repeat
bg-repeat-x
bg-repeat-y

Happy to accept a PR for getting this started, otherwise I can start something if I have time over the next few days.

[sorinr]

@pxwee5 as you initiated it do u have time in making that PR? i would call the generator backgroundRepeat.js. @adamwathan what do you think ?

[MichaelDeBoey]

@sorinr @pxwee5 PR is on it's way 🙂😉

[MichaelDeBoey]

@sorinr @pxwee5 PR is merged with the 0.3 branch now 🙂

[adamwathan]

Closing since this is now in 0.3:

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