I have a conditional class for 'show' when show is true our div element should transition in from -right-[55rem] to right-[0rem] the issue is it is not doing this w/ a duration of 700ms it just pops open, when I do the inspect on dev tools I can click and unclick the style elements and it will slide in like I want it to. I have made sure everything i numerical value on TW side and cannot figure out why it works on inspect and not on the actual button click for our ui
<div className={classNames(show ? "right-[0px] top-0 transition-all duration-700 ": "top-0", "-right-[330px] mt-14 md:mt-0 w-screen md:left-0 absolute md:fixed md:w-40 bg-default overflow-y-auto flex")}></div>
Try to use this
<div className={`${show ? `right-[0px] top-0 transition-all duration-700`: `top-0`} -right-[330px] mt-14 md:mt-0 w-screen md:left-0 absolute md:fixed md:w-40 bg-default overflow-y-auto flex`}></div>
Looks like the package released a fix :)
https://github.com/tailwindlabs/headlessui/pull/1803
serveral failed attempts with headless ui Transition finally got it working with this snippet wrapping my component. perfectly sliding into to view :)
<Transition
as={Fragment}
appear={true}
show={show}
enter="transition-all ease-in duration-500 "
enterFrom="-right-full"
enterTo="right-0"
leave="transition-all ease-out duration-500 "
leaveFrom="right-0"
leaveTo="-right-full"
>
<div className="absolute top-[56px] md:mt-0 md:left-0 w-screen
md:fixed
md:w-40 bg-default overflow-y-auto flex">...</div>
</Transition>
Related
iam just learning about React JS and a Tailwind, so i want to make a Carousel for my website project using a React JS & TailwindCSS, I've already make the Carousel but its not done yet, i want to make the Carousel Slide Horizontally and if the Carousel reach the end i iwant to make it back to beginning. Here's my code
`
<div className="mx-10 py-5 overflow-x-hidden">
<div className={`flex flex-none min-w-screen bg-gray-900 space-x-10 transition-transform duration-300 -translate-x-[${index}rem]`}>
<div className={`wrapper flex-none w-[55%] h-48 bg-gradient-to-r from-green-300 to-cyan-400 rounded-3xl text-3xl`}>
</div>
<div className={`flex-none w-[55%] h-48 bg-gradient-to-r from-fuchsia-600 to-pink-500 rounded-3xl`}>
</div>
<div className={`flex-none w-[55%] h-48 bg-gradient-to-r from-red-400 to-orange-300 rounded-3xl`}>
</div>
</div>
</div>
`
Sorry for my english
I want to make my Carousel works, the Carousel that i make can slide from begin to end, and at the end it will back to beginning again.
I have animations on titles. One is at the bottom of the screen, and we don't need to scroll to see it.
Here is my code :
<section className='relative px-5 lg:px-10'>
[...]
<h2 data-aos='fade-right' data-aos-duration="700" data-aos-delay="400" className='mt-12 mb-4 flex text-2xl font-bold text-lightBlack'>[...]</h2>
[...]
<h2 data-aos='fade-right' data-aos-duration="700" data-aos-delay="400" className='mb-4 flex text-2xl font-bold'>[...]</h2>
[...]
Problem : The title at bottom of screen does not display until I scroll. I would like it so be displayed and animated when the page load like the others h2.
How can I do this ?
Found the solution, in case it helps. Setting an offset to trigger when the animation start did the job :
AOS.init({
offset: 20,
});
This means : when the target element is at 20px from bottom of screen, trigger animation.
I am trying to apply a style to my links when they are focused. But it does not work. I am using tailwindcss (on a React js application).
Here is my code :
<Link to='/clients' className=''>
<div className="text-2sm font-semibold flex items-center mb-4 hover:bg-[#BE97C6] focus:bg-[#BE97C6] px-2 py-1 rounded-full transition ease-in-out ">
<IoPersonCircleSharp className="text-xl mx-1"/>
<p className="">Clients</p>
</div>
</Link>
Can you, please, help me to solve it ? Thanks you !
Your Link is getting focused and not the div.
Try to set group class on Link and then group-focus:bg-[#BE97C6] on the div.
I am using React With Tailwind
I need to Apply same Gradient to Navbar as well as Sidebar
but applying gradient on both give different flow.
Please give me solution!
<navbar className="flex h-16 w-full bg-gradient-to-r from-gray-800 to-blue-800 justify-center"></navbar>
<sidebar className='flex absolute h-full w-1/4 bg-gradient-to-r from-gray-800 to-blue-800'></sidebar>
If you can make sure your navbar is 100vw, then you can add Pseudo-element to the sidebar and add gradient background to it. If there is a vertical scrollbar, it may shift the gradient a bit. You can apply the same trick to the navbar to avoid this behavior, but overflow:hidden may affect some overflow element like menu dropdown. In this case, you may nest another full width, height, absolute div then add Pseudo-element into it in your navbar.
<div className="flex h-16 w-full justify-center bg-gradient-to-r from-gray-800 to-blue-800 overflow-y-scroll"></div>
<div className="relative flex h-full w-1/4 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>
Code can be found here
I have a React Gatsby web app and I have a component that renders answer cards with an image on each card. I know there is a known issue with windows 10 and chrome which is fixed by disabling hardware acceleration, but my site is the only one that I have such bad flickering. I have tried to refactor everything to have the best performance but the issue persists.
I know that this Google Chrome Flicker Unable to Find Cause
solves the issue, but users will not do this since even for me this is the only site that this happens.
My components look something like this.
<div className="flex flex-wrap justify-center py-10 px-8">
{answers.map((e) => (
<Field key={e.id} type="radio" name={id} value={e.answerId}>
{() => {
return (
<div
onClick={onClick}
className="flex flex-col justify-around w-32 h-44 2k:w-48 2k:h-72 shadow-3xl rounded-md mx-2 my-3 cursor-pointer transform transition-transform"
>
<div className="flex-1" />
<div className="inline-block px-2 m-3">
<img src="https://w7.pngwing.com/pngs/247/929/png-transparent-potato-food-anime-potato-food-manga-cartoon.png" />
</div>
</div>
);
}}
</Field>
))}
</div>
I have tried almost everything. Removing flex does not fix the issue. If I remove the image the issue is fixed. Any help appreciated.
Found it. Although in general the flickering issue with Chrome + Windows is fixed, it seems that there are cases where hardware acceleration is still struggling.
In my case I had a div element with filter grayscale CSS and both box-shadow applied (for the card unselected state above). Probably chrome renderer had issues applying the filter to the box-shadow element so that caused the flickering. I moved the filter to the inside image element (which makes more sense either way) and the issue was fixed.