For this article I am going over how to add in a custom tailwind animation. That you can then just add this as another class to your element.

The best way to do I have found is in adding the css animation declaration in your tailwind.config.js file, if you are using next.js like me.

Getting started

To start you need to open your tailwind.config.js and then we are going to add a couple lines to here.

Under the theme section of your file is where we are going to start:

module.exports = {
...
  theme: {
    extend: {
      keyframes: {
       letterSpaced: {
        '0%':{ letterSpacing: ' 2rem'},
        '100%': { letterSpacing: 'initial'},
       },
      },
    },
  },
...
}

This is how we declare an animation in the tailwind file. Using the hierarchy theme > extend > keyframes. Under the keyframes section we add a name and let that contain an object. The name of my animation is letterSpaced. This gives a large letter space and then reduces it to the initial amount.

Here is the same declaration in vanilla css, so you can see the difference and how we can transfer this.

@keyframes letterSpaced {
    0% {
        letter-spacing:2rem;
    }
    100% {
        letter-spacing:initial;
    }
  }

One thing to take note of is that in css when you have a dash, the way you declare this in the tailwind.config.js is to remove the dash and capitalize the first letter of the next word. e.g. letter-spacing -> letterSpacing.

But otherwise it is quite self-explanatory and you can see how we move it over into the tailwind config.

Declaring the animation class

Now we are going to add the animation and how it moves, the time it takes and any other things we need to run the animation.

So, in the tailwind.config.js file we are going to be adding another section to the extend section of the theme.

module.exports = {
...
  theme: {
    extend: {
        ...
      animation: {
        letterSpaced: 'letterSpaced 2s ease-in',
        ...
      },
    },
  },
...
}

As you can see for the animation you declare it as you do in css but using the name you made up earlier.

Here is the css version of the implementation:

@classifier {
    animation: letterSpaced 2s ease-in;
}

In css you can see we add this to a certain object so if you wanted to add this to multiple elements you would have to write this out in each of them. Also, anything you can use in css to change the animation you can use here, like a custom bézeir curve or adding infinite so the animation will repeat itself once it has done.

But with tailwind we just have to declare this once in this file then we can use it, like below, in our HTML so we repeat a little less then we would have to. As the DRY (Don't Repeat Yourself) approach is best.

Applying the animation in HTML

Now we have defined our animation and how it is played out. we can start adding this to our HTML.

Here is an example:

    <h1 className=" ... animate-letterSpaced">A Web Developer</h1>
    <h2 className=" ... animate-letterSpaced">Helping you to get the most from your businesses website.</h2>

So, in the className of our JSX elements (The template's used by next.js). But as this uses HTML as a starting point you can just add this to your class if you are using basic HTML.

Then on reloading the page you should be able to see your animation play out.

Conclusion

I really like how tailwind has implemented this as it will save you time when having one animation you can use across all elements, so when changing how the animation works in the future you just have to change it in one place rather then going through all your css classes with the animation and changing each of the seconds to make it last longer for an example.

Well, I hope this can help you implement some of your own animations in tailwind.

Thank you for reading!

Back to Home