How to implement background-position-x in tailwind?

user_5158992 0
Viewed 1701

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

tailwind-css
2 Answers

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;
}
user_110162620

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.

user_161353860
Related