tailwind negative value with prefix class

Admin 1
Viewed 529

in my tailwind.config.js I've setup this

module.exports = {
  prefix: "tw-",
}

then I tried class="tw--top-4" but top: '-4px' is not reflected. I read the doc the negative value can be class="-top-4" but what about you want to use it with prefix? I also tried class="-tw-top-4" but no luck.

tailwind-css css html
1 Answers

The working variant right now is tw--top-4 (but for some reason autocomplete shows -tw-top-4 instead, it's probably a bug), so negation comes after the prefix. There is a discussion about it on Github, but right it is like that.

To actually apply it you also need to add position for the element, e.g. relative or an absolute and etc. (don't forget your prefix too)

Example:

<div class="tw-text-red-500 tw-relative tw--bottom-4">
  One
</div>
<div class="tw-text-green-500">
  Two
</div>
<div class="tw-text-blue-500">
  Three
</div>

Playground

user_56504470
Related