🎥 New plugins animations and keyframes that work hand-in-hand together to animate your UI. Here is an example:
theme: {
animations: {
spin: 'spin 4s linear infinite',
},
keyframes: {
spin: {
'from': { 'transform': 'rotate(0deg)' },
'to': { 'transform': 'rotate(360deg)' },
}
}
},
plugins: [
require('tailwindcss-plugins/animations'),
require('tailwindcss-plugins/keyframes'),
],
<div class="spin bg-blue-500 w-16 h-16"></div>
Note that you can pull some existing keyframes out-of-the-box. For example, the following code is equivalent to the configuration above.
theme: {
animations: {
spin: 'spin 4s linear infinite',
},
},
plugins: [
require('tailwindcss-plugins/animations'),
require('tailwindcss-plugins/keyframes/spin'), // <- Simply pull the keyframes you need.
],
⬆️ Additional, this library makes now use of Lodash. I originally tried to avoid using it to keep the library light and independent but, since TailwindCSS has Lodash in its dependency, the end-user will end up using Lodash so we might as well use it here too.