'tailwind negative value with prefix class

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.

htmlcsstailwind-css


Solution 1:[1]

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

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 Danila

Related Questions