problem with tailwind filp card flip in any order

my problem is that the cards are not flipped sequentially

this is my code in tsx:

import { useState } from 'react';
// import tw from 'tailwindcss'


const LandingPage = () => {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseEnter = () => {
    setIsHovering(true);
  };

  const handleMouseLeave = () => {
    setIsHovering(false);
  };


  const tablets ={
    front: ["F","r","a","n","c","o"," ","A",".","M","a","r","c","u","z","z","i"," "],
    back: ["D","e","v","e","l","o","p","e","r"," ","B","a","c","k","e","n","d"," "],
  }
  return (
    <section id="home">
    <div className="container mx-auto flex px-10 py-20 md:flex-row flex-col bg-black">
      <div className="bg-slate-800 flex-grow w-full flex items-center justify-center flex-col group"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}>
       <div className="grid grid-cols-9 gap-1 my-4 w-full text-center font-extrabold font text-3xl lg:text-6xl sm:text-6xl md:text-4xl">
       {tablets.front.map((e, index) => (
        <div className={`relative bg-red-800  transform transition ease-in-out hadow-xl shadow-black/40 ${isHovering ? `group-hover:[transform:rotateY(180deg)] duration-1000` : ''}`} key={index}>
        <div className="bg-red-800 p-2 ">{e}</div>
        <div className={`absolute top-0 left-0 w-full h-full  bg-blue-500 p-2  text-white  transform transition ease-in-out group-hover:[transform:rotateY(180deg)] ${isHovering ? `delay-${index}` : `opacity-0  delay-${index} ` }`}>
          {/* <p>{tablets.variablesDelay[index]}</p> */}
          <p>{tablets.back[index]}</p>
          
          
          </div>
        </div>
      ))}
        </div>
</div>

this is my code in tailwin.config:

/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");

const Myclass = plugin(function ({ addUtilities }) {
  addUtilities({
    ".my-rotate-y-180": {},
  });
});

const animationDelay = plugin(
  function ({ matchUtilities, theme }) {
    matchUtilities(
      {
        delay: (value) => {
          return {
            "transition-delay": value,
          };
        },
      },
      {
        values: theme("animationDelay"),
      }
    );
  },
  {
    theme: {
      animationDelay: {
        0: "0ms",
        1: "200ms",
        2: "400ms",
        3: "600ms",
        4: "800ms",
        5: "1000ms",
        6: "1200ms",
        7: "1400ms",
        8: "1600ms",
        9: "1800ms",
        10: "2000ms",
        11: "2200ms",
        12: "2400ms",
        13: "2600ms",
        14: "2800ms",
        15: "3000ms",
        16: "3200ms",
        17: "3400ms",
      },
    },
  }
);

I tried passing a variable in className="delay-${index}"

with which I access the index of each of the cards and I determine a delay for each one

but it doesn't work turn in any order

help me please !!

i am new to tailwind and tsx

Solution

You mostly had this working. I removed the unneeded mouse event handlers. These were causing collisions with the CSS hover property that you correctly set using a group on the parent. Keep in mind with Tailwind that your classes need to be in your source. Avoid using JS for class manipulation.

Another couple of small changes were to remove the opacity and use backface-visibility, as well as to remove the second hover transform. Think of it this way, when you're hovering on the parent, the cards flip, and when you're not they are in their default state. So you don't need to try and force the cards back in the initial state with a transform on the reverse of the cards.

Also, you don't actually need to add in all of those animation delays in your config. It seems really rigid and it would be a pain to update all of them if you wanted to speed things up or slow them down. Instead, use a CSS custom property. You can then set that variable in the styles for each of the letter card elements individually. This makes it really easy to change one value to adjust the speed to your liking.

Working Snippet:

function LandingPage() {
  const tablets = {
    front: ["F","r","a","n","c","o"," ","A",".","M","a","r","c","u","z","z","i"," "],
    back: ["D","e","v","e","l","o","p","e","r"," ","B","a","c","k","e","n","d"," "],
  }
  return (
    <section id="home">
      <div className="container mx-auto flex px-10 py-20 md:flex-row flex-col bg-black">
        <div className="bg-slate-800 flex-grow w-full flex items-center justify-center flex-col group cursor-pointer">
          <div className="grid grid-cols-9 gap-1 my-4 w-full text-center font-extrabold font text-3xl lg:text-6xl sm:text-6xl md:text-4xl">
            {tablets.front.map((e, index) => (
              <div className="relative bg-red-800 transform transition ease-in-out shadow-xl shadow-black/40 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] duration-1000 delay-[var(--delay)]" style={{"--delay": index * .1 + "s"}} key={index}>
                <div className="bg-red-800">{e}</div>
                <div className="absolute inset-0 h-full w-full bg-blue-500 [transform:rotateY(180deg)] [backface-visibility:hidden]">
                  <p>{tablets.back[index]}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<LandingPage />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div id="root"></div>