CODEWITHSUNDEEP
csssasscss-transitionstailwind-css
princeoo7
princeoo7

Reputation: 1121

Custominze transition in tailwaindcss

i am working on a dashboard and recently adam (tailwindcss) made a scren cast on kanban of trello like dashboard. I liked it and was trying to implement it. the issue i am at is related to the transition effects used by him in screen cast. they are not yet in tailwindcss but in future they will be. i did a bit of digging and was able to implement it. But the issue is as follow.



.translate-x-full {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.-translate-x-full {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.translate-x-0 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

this is the css code to make transition it works well be i only have issue in desktop mode where .-translate-x-full this is implemented even if i use lg:translate-x-0'. This might be due as tailwindcss don't have transition as of yet. so my question is, how can i makelg:translate-x-0' work and over write, .-translate-x-full effect.

below is the code in aside menu:


<div 
:class="sideBarOpen ? 'translate-x-0 ease-out transition-medium': '-translate-x-full ease-in transition-medium'"
class="aside fixed z-30 inset-y-0 left-0 w-64 px-8 py-4 bg-gray-100 border-r border overflow-auto lg:translate-x-0 lg:static lg:inset-auto"
>
</div>

Upvotes: 0

Views: 607

Answers (1)

princeoo7
princeoo7

Reputation: 1121

found a solution with was something i need.

to make my custom css responsive i just had to put it inside a responsive wrapper like below:


@responsive {

.translate-x-full {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.-translate-x-full {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.translate-x-0 {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}


}

and it created all the required classes. plus normally, class with - as start like .-class-name won't complite into normall css for some unknown reason. but here that to is working and solved lot's of issue.

Upvotes: 3

Related Questions