css Question posted in
Some basic documentation can be found here.

Css – How to use not operator when using state variables in tailwind?

Let’s say I have a h1 tag like this:

<h1 data-position="left" class="data-[position=mid]:animate-fade-out">content</h1>

How can I use tailwind(maybe with some not operator based on my last search results but I still don’t know how) to do animate-fade-in when position is not equal to mid?
There are three general choices on position attribute: left, right and mid

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The closest that I could get to was something like this:

    <h1 data-position="left" class="data-[position=mid]:animate-fade-out data-[position$=t]:animate-fade-in">content</h1>

    Which $= is an attribute selector and works when the attribute data value ends with that letter 't' and I did that because there are three general choices on position attribute: left, right and mid As it is obvious the left and right words end in t so I can enable and disable different animations based on that.

    I'm sure there is a better way and if you know it, I'll be pretty happy to know that.


  2. 0

    You can do it like this:

    <h1 data-position="left" class="animate-fade-in data-[position=mid]:animate-fade-out">
  content
</h1>

    Check out this playground

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search