Skip to content

v0.3.0

Latest
Compare
Choose a tag to compare
@lorisleiva lorisleiva released this 10 Aug 18:47

🎥 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.
],

See available keyframes

⬆️ 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.