'How to implement background-position-x in tailwind?

I'm trying to make my background image responsive using tailwind. Can't find background-position-x in their documentation.

tailwind-css

Solution 1:^[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;
}

Solution 2:^[2]

Simply use the bg-center bg-bottom... bg-left-bottom classes, as explained here.

If you need more flexibility, you can use TailwindCSS with PostCSS, and edit theme.backgroundPosition in your tailwind.config.js. You can then add more complex rules there.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	eripanci
Solution 2	Vursc

'How to implement background-position-x in tailwind?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]