React - Tailwind custom transform animations
Tags: react, tailwindcss, animations, webdev
Published: 2021-08-16 07:39:00

In this article, we will create a custom transition animation in React/Tailwind app. 
Let's build the CardContainer component with 3 cards. When we clicked on a single card, width and height changes. So the card becomes active.

Single Card component looks like this:
```javascript
const Card = ({ title, color, id, setActiveCardId, activeCardId }) => {
  return (
    <div
      onClick={() => setActiveCardId(id)}
      className={`w-${activeCardId === id ? 40 : 32} border-2 border-black m-4`}
    >
      <div className="h-8 text-center">{title}</div>
      <div className={`h-${activeCardId === id ? 40 : 32} bg-${color}`} />
      <div className="h-12" />
    </div>
  );
};
```

If id and activeCardId props are equal, we set width and height to 40 if not, then to 32.

Now create a Card Container with 3 cards rendering inside:
```javascript
function CardContainer() {
  const [activeCardId, setActiveCardId] = React.useState("");

  return (
    <div className="flex items-center justify-center p-10">
      {[
        { id: "1", title: "Wow", color: "red-600" },
        { id: "2", title: "Boss", color: "green-600" },
        { id: "3", title: "Coco", color: "pink-600" }
      ].map(card => (
        <Card
          key={card.id}
          id={card.id}
          title={card.title}
          color={card.color}
          activeCardId={activeCardId}
          setActiveCardId={setActiveCardId}
        />
      ))}
    </div>
  );
}
```
It renders cards with an id, title, and color. And here we are storing the activeCardId. For now, tailwind.config.js:

```javascript
empty module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};
```
and the results looks like this:
![ezgif-6-47f6a85810c3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvsl3mjcriqeigapr6o7.gif)

Looks good but can be even more perfect if we add some animation. First, let's modify tailwind.config.js with custom transitionProperty for width and height. And don’t forget to destruct defaultTheme.transitionProperty - we don’t want to overwrite other  

```javascript
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        ...defaultTheme.transitionProperty,
        width: "width",
        height: "height"
      }
    }
  },
  variants: {},
  plugins: []
};

```
 
and in a Card adds this code 'transition-width duration-300 easy' for classes on width and height animation:

```javascript
const Card = ({ title, color, id, setActiveCardId, activeCardId }) => {
  return (
    <div
      onClick={() => setActiveCardId(id)}
      className={`w-${
        activeCardId === id ? 40 : 32
      } border-2 border-black m-4 transition-width duration-300 easy`}
    >
      <div className="h-8 text-center">{title}</div>
      <div
        className={`h-${
          activeCardId === id ? 40 : 32
        } bg-${color} transition-width duration-300 easy`}
      />
      <div className="h-12" />
    </div>
  );
};
```
final result:
![final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spj2a2uv52i1t9wpj5kn.gif)


Codesandbox example:
https://codesandbox.io/s/react-tailwind-starter-forked-bkrv4?file=/src/App.js