CODEWITHSUNDEEP
tailwind-css
fcrozatier
fcrozatier

Reputation: 721

Tailwind CSS negative translate on a before element

I'm trying to center a before pseudo element relative to its parent and I'm wondering whether there is a tailwind syntax to apply negative values to the translation of the before element.

My div looks like

<div class="relative before:absolute before:content-['centered'] before:left-1/2">
    I'm a div and my before element is perfectly centered
</div>

I would like to use something like before:-translate-x-1/2 or -before:translate-x-1/2 but this does not seem to work.

I can work around by defining an extra center class like

.center::before{
  transform: translate(-50%);
}

Is there a way to achieve this using only tailwind utility classes ?

Upvotes: 1

Views: 2020

Answers (1)

fcrozatier
fcrozatier

Reputation: 721

Turns out you can do before:-translate-x-1/2.

If you have a similar issue, for me the fix was that for some reason the tailwind layer base was commented out so some utilities didn't work.

Upvotes: 3

Related Questions