CODEWITHSUNDEEP
tailwind-css
Chris
Chris

Reputation: 21

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.

Upvotes: 2

Views: 9432

Answers (2)

eripanci
eripanci

Reputation: 45

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

Upvotes: 2

Vursc
Vursc

Reputation: 19

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.

Upvotes: -3

Related Questions