How to implement background-position-x and background-position-y utilities?

Question

I'm trying to make my background image responsive using TailwindCSS. Can't find background-position-x and background-position-y utilities in documentation. How can I implement them?

Answer 1

At the moment, TailwindCSS doesn't have a utility for this. Except for adding it as a utility either by a plugin or in CSS, if you're using the JIT Mode, the shortest way to do this is adding it as an arbitrary property.

For example adding this: [background-position-x:-100px] will generate:

.\[background-position-x\:-100px\] {
  background-position-x: -100px;
}