negative position utility classes not generated

Question

I am trying to use negative position utility classes like -left-1 but they are not being generated.

I am using version 2.0.2 and checking the generated css I can see that these classes are not being generated although regular positive ones are. The negative classes are listed on this page as a default class: https://tailwindcss.com/docs/top-right-bottom-left.

I have tried reset the config to default:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

But it still doesn't generate the negative classes listed at top of the doc page.

Why are these classes not being generated?

Answer 1

It should work as mentioned in the docs. Maybe your screen/viewport is hidding the negative margin with overflow-hidden or something else.

Checkout this working model for negative left-1

<div class="relative h-32 w-32 bg-green-100 mx-auto">
  <div class="absolute inset-x-0 top-0 -left-1 h-16 bg-green-300">1</div>
</div>

Answer 2

I never generated it before, but I achieved to make it work. Here are the steps that I followed.

npx tailwindcss-cli@latest init -p

I get the following version: tailwindcss 2.0.3, then I'm generating it with

npx tailwindcss-cli@latest build -c tailwind.config.js -o compiled.css

After looking into the compiled file, I can see that it generated all the negative inset classes like .-inset-1 properly.

---

PS: this playground example confirms that it is working properly, just to be sure.