Custom CSS variables in custom Tailwind Animations Config

How many times have you experienced the need to create custom animations in your project? I have experienced this many times. I have used Tailwind CSS for a long time, and I love it. But sometimes, I need to create custom animations that are not available in the default Tailwind CSS configurations and that too with custom dependable variables, like I want the animations to be updated based on the theme/setting of the website.

In this blog post, I will show you how you can create custom animations in Tailwind CSS using custom CSS variables and how you can update the animations based on the theme/setting of the website using custom CSS variables in the Tailwind CSS configuration.

Custom CSS variables

Custom CSS variables are a powerful feature in CSS that allows you to define your own variables and use them throughout your CSS. You can define custom CSS variables using the -- prefix followed by the variable name. For example, to define a custom CSS variable for the primary color, you can use the following code:

:root {
  --variable-height: 100px;
}

You can use the custom CSS variable in your CSS using the var() function. For example, to use the custom CSS variable for the primary color, you can use the following code:

.element {
  height: var(--variable-height);
}

Custom CSS Animations

To create custom animations in your CSS, you can use the @keyframes directive. For example, to create a custom animation that fades in an element, you can use the following code:

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

You can use the custom animation in your CSS using the animation property. For example, to apply the fadeIn animation to an element, you can use the following code:

.element {
  animation: fadeIn 1s ease-in-out;
}

Custom CSS variables in Tailwind CSS animations

To create custom animations in Tailwind CSS using custom CSS variables, you can define the custom CSS variables in the Tailwind CSS configuration file. For example, to define a custom CSS variable for the primary color, you can use the following code in your tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      animation: {
        fadeIn: `fadeIn 0.5s ease-in-out`,
      },
      keyframes: {
        fadeIn: {
          from: {
            opacity: 0,
            transform: "translateY(var(--variable-height))",
          },
          to: {
            opacity: 1,
            transform: "translateY(0)",
          },
        },
      },
    },
  },
};

This code defines a custom animation called fadeIn that fades in an element and moves it from the top of the screen to its final position. The animation duration is set to 0.5s, and the easing function is set to ease-in-out.

Since our tailwind.config.js file is a using a custom CSS variable --variable-height, we can update the animation based on the theme/setting of the website by updating the value of the custom CSS variable anywhere within our project using simple JavaScript.

Example

Here is an example of how you can update the value of the custom CSS variable --variable-height based on the theme/setting of the website using JavaScript:

Suppose we have a button that toggles the height of a div element and we want another div element to animate based on the height of the first div element. We can use the following code to achieve this:

const button = document.querySelector(".button");
const div1 = document.querySelector(".div1");
const div2 = document.querySelector(".div2");

button.addEventListener("click", () => {
  div1.style.height = div1.style.height === "100px" ? "200px" : "100px";
  div2.style.setProperty("--variable-height", div1.style.height);
});

In this code, we are updating the value of the custom CSS variable --variable-height based on the height of the first div element whenever the button is clicked.

Conclusion

Custom CSS variables are a powerful feature in CSS that allows you to define your own variables and use them throughout your CSS. You can use custom CSS variables to create custom animations in Tailwind CSS and update the animations based on the theme/setting of the website.

I hope you found this blog post helpful. Stay tuned for more posts!🙌