Tailwind arbitrary background-position values

NickW 0
Viewed 29

The docs say that with the jit mode you can use arbitrary values for background positioning, giving the example:

<div class="bg-[center_top_1rem]">

But this isn't an arbitrary css value like say 80px.

Is there any documentation for this syntax?

1rem obviously offsets the top value, but how would I also offset the center? My guess of bg-[center_2rem_top_1rem] doesn't work.

I'm also surprised that something like bg-[0% 20%] doesn't work, especially as I've seen it suggested as answers to other questions.

Thanks

tailwind-css css html
1 Answers

Good question. It is picking up the background position with a 3-value syntax which is documented here:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Example 1

bg-[center_top_1rem]

The center keyword value defines X. top keyword value defines Y, and 1rem defines the offset value for Y.

Example 2

[center_2rem_top_1rem]

Your example does work, and will create the following css. It centres the image on the x-axis and then offsets by 2rem.

.bg-\[center_2rem_top_1rem\] {
  background-position: center 2rem top 1rem;
}

Example 3

[left_2rem_top_1rem]

The effect is more obvious when we set the background-image to the left and then add an offset.

Example 4

bg-[0% 20%]

Any spaces should use an underscore so at least it should be bg-[0%_20%] but I couldn't get it to work with percentage values. It did work with keywords bottom_right

Here are all the examples, https://play.tailwindcss.com/uKNZ5jEcOK

You can see the CSS created in the Utilities tab of the Generated CSS tab.

stickyuser0
Related