CODEWITHSUNDEEP
htmlcsstailwind-css
user18042993
user18042993

Reputation:

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.

Upvotes: 5

Views: 2806

Answers (1)

Danila
Danila

Reputation: 18566

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

Upvotes: 2

Related Questions