I am trying to learn how to use animation with Tailwind. The animation that I am trying hopelessly to make is:
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
The element I'm trying to animate is:
<div class="absolute top-0 inset-x-0 p-2 duration-200 ease-out transition transform origin-top-right">
Now I'm not quite sure exactly what to do since this animation should only run as soon as it is displayed I've attempted:
<div class="absolute top-0 inset-x-0 p-2 duration-200
ease-out transition transform origin-top-right" style="${this.showMenu ? '' : 'display:none'}">
However this doesn't really give me an animated result. What can I try next?
Using dynamic style is not usually recommeded. Instead you could use && operator and display only if the showMenu is set to true
{ this.showMenu && <div class="absolute top-0 inset-x-0 p-2 duration-200
ease-out transition transform origin-top-right"> }
Related
Is there any way to create a display or visibility transition using Tailwind and a conditional code at Next? I'm trying something like this, what I would like to achieve is a smooth fade in effect when the backend returns a exception message under the responseError object (using Context in Next) but there's no transition effect at all:
{
responseError ?
<span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
username or password incorrect
</span>
: null
}
or
{
responseError ?
<span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
{ responseError.message }
</span>
: null
}
Use opacity instead of visibility.
This stack overflow answer goes over a similar issue you are facing. In short, the visibility property has two possible values: visible or hidden. On the other hand, opacity can be between 0 and 1, so proper keyframes can be applied when using the transition property.
As a side note, I noticed you are checking for the responseError twice, once to render the <span> and again to apply tailwind classes. This will cause your fade in transition to only work when fading in because the <span> is only rendered when responseError exists. Instead, try something like this:
<span className={`${ responseError ? "opacity-100" : "opacity-0"} transition-opacity ease-in-out delay-150 duration-300 pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
{ responseError ? responseError.message : '' }
</span>
I try to put a simple transition on an after pseudo element in Tailwind.
The css is:
.button::after {
transition: 0.5s all ease
}
I tried:
class="after:transition after:ease after:duration-500"
But nothing. I see that after:ease doesn't work, but how do I go about this?
Thanks so much!
You have added only ease as the class. But tailwind have no class named ease. So you have to update your class ease with one of the following classes:
ease-in
ease-out
ease-in-out
ease-linear
For more information please refer to Official Tailwind Docs
Define transition, duration and ease (-in,out, etc.) Take a look to this class:
<div
class="transition-opacity
duration-500
ease-out opacity-100 hover:opacity-0
bg-black text-white font-bold p-10 px-4 h-screen">
Bye Bye
</div>
working example
https://play.tailwindcss.com/160JJfEXJe
I'm trying to create an arrow that moves(goes up through the upright corner and then reappears via the bottom left corner after that). So far I have the disappearing portion done but cannot resolve how to get it to then come back up through the bottom left.
My code is as follows:
<div class="text-3xl w-fit" style="clip-path: inset(0 0 0 0 );" >
<div class="transition ease-in-out hover:-translate-y-5 hover:translate-x-5 " >↗</div>
</div>
(also any better method would be lovely)
Try this:
DEMO
<script src="https://cdn.tailwindcss.com"></script>
<div class="text-3xl p-2 group border w-fit grid" style="clip-path: inset(0 0 0 0 );">
<div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out group-hover:delay-300 translate-y-10 -translate-x-10 group-hover:translate-y-0 group-hover:translate-x-0">↗</div>
<div class="[grid-area:1/1] flex items-center justify-center h-10 w-10 transition ease-in-out delay-300 group-hover:delay-[0s] duration-300 group-hover:-translate-y-10 group-hover:translate-x-10">↗</div>
</div>
I'm trying to use Tailwindcss in a React project where I am replicating the Star Wars website mobile menu. However, the box shadow that I am adding to the hamburger icon segments is not showing up when the nav drawer is opened.
Link to sandbox: https://play.tailwindcss.com/upmiAWTcso
index.js:
const toggleDrawer = (event) => {
document.querySelector("#drawer").classList.toggle("left-[-100%]");
document.querySelector("#drawer").classList.toggle("left-0");
document.querySelector("#bar-1").classList.toggle("hidden");
document.querySelector("#bar-2").classList.toggle("active-2");
document.querySelector("#bar-3").classList.toggle("active-3");
};
<div
onClick={toggleDrawer}
className="h-full flex flex-col justify-center items-center space-y-[8px]"
>
<span
id="bar-1"
className="block h-[2px] w-[30px] border-zinc-500 border-l-[4px] border-r-[20px] rounded-full transition-all duration-300"
></span>
<span
id="bar-2"
className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[20px] border-r-[4px] rounded-full origin-bottom-right transition-all duration-300"
></span>
<span
id="bar-3"
className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[4px] border-r-[20px] rounded-full origin-bottom-left transition-all duration-300"
></span>
</div>;
global.css:
#layer components {
.active-2 {
#apply
rotate-45
-translate-x-2
translate-y-[530%]
!w-[34px]
!border-l-[25px]
!border-r-[5px]
!border-white
shadow-[#d50032];
}
.active-3 {
#apply
-rotate-45
translate-x-1
!w-[34px]
!border-l-[5px]
!border-r-[25px]
!border-white
shadow-[#106ae0] !important;
}
}
You only have a shadow color declared. You also need a shadow size like shadow-md.
Here's an example on Tailwind Play showing the difference https://play.tailwindcss.com/gxG7cir5EQ
You are applying !important the wrong way. To add !important to a tailwind class just add ! add the start like this:
#layer components {
.active-2 {
#apply
rotate-45
-translate-x-2
translate-y-[530%]
w-[34px]
border-l-[25px]
border-r-[5px]
border-white
!shadow-[#d50032];
}
.active-3 {
#apply
-rotate-45
translate-x-1
w-[34px]
border-l-[5px]
border-r-[25px]
border-white
!shadow-[#106ae0];
}
}
It's an browser support issue
The problem is an combination of border-radius and box-shadow if you open
https://play.tailwindcss.com/gxG7cir5EQ in opera it doesn't work but in Chrome for example it does. If you remove the rounded corners it shows the shadow.
I'm currently using Tailwind / TailwindUI and I would like to scale down ALL items.
Eg I go to my website and Zoom out so everything becomes smaller and the zoom level is 85%
I would like my website to appear at this scale (85%) when a normal user visits.
How would I go about doing this in tailwind?
You can use transform & scale property to achieve this.
Just add transform along with the scale-95 etc.
Visit for more reference :-
https://tailwindcss.com/docs/scale
https://tailwindcss.com/docs/transform
A simple solution to this is using the browser's built in zoom functionality.
document.body.style.zoom = "85%"
I've tested this on Chrome 101.
This is functional Alpine.js component that achieves dynamically changing browser's zoom percentage:
<div x-data="{zoom:100}" class="flex bg-teal-600 text-white mx-3 my-2 rounded-md text-sm font-medium">
<div #click="document.body.style.zoom = `${zoom-=10}%`" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 pl-3 rounded-l">-</div>
<div x-text="zoom" class="px-2 pt-1"></div>
<div #click="document.body.style.zoom = `${zoom+=10}%`" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 rounded-r">+</div>
</div>