Extending Animations and Keyframes

[liam-edwards]

Hi,
I currently have the need to add an additional keyframe and animation using that keyframe. Following the documentation on how to achieve that, my config file now looks like this:

module.exports = {
	mode: 'jit',
	purge: ['./resources/**/*.{ts,edge}'],
	darkMode: 'class',
	plugins: [
		require('@tailwindcss/aspect-ratio'),
	],
	theme: {
		fontFamily: {
			heading: ['Heebo', 'sans-serif'],
			body: ['Oxygen', 'sans-serif'],
		},
		extend: {
			keyframes: {
				extend: {
					'0%': { width: '0' },
				},
			},
			animation: {
				extend: 'extend 2s ease-in-out 1s 1 forwards',
			},
			screens: {
				mobile: '450px',
			},
		},
	},
}

Now herein lies the problem. The keyframes and animation are not getting created. I've had to resort to creating the animations in my CSS which is fine but undesirable. Everything else in the config file works as intended, just not those two.

Am I doing something wrong? Is the documentation out of date/wrong? I am running version 2.1.1.

In case it matters, I'm building everything with Laravel Mix. Here's the webpack file:

const mix = require('laravel-mix')

// NOTE: Don't remove this, Because it's the default public folder path on AdonisJs
mix.setPublicPath('public')

mix.webpackConfig({
	devtool: 'source-map',
})

// Add your assets here
mix
	.ts('resources/assets/js/app.ts', 'js')
	.css('resources/assets/css/app.css', 'css', [
		require('tailwindcss')('tailwind.config.js'),
		require('postcss-import'),
		require('postcss-nested-ancestors'),
		require('postcss-nested'),
		require('postcss-current-selector'),
		require('postcss-preset-env'),
	])
	.sourceMaps()
	.version()

[olets]

Assuming you have something like <div class="animate-extend">animate this</div> your animation won't necessarily be visible, for CSS reasons not Tailwind reasons. You'd be animating from width: 0 to width: auto which can only do a binary flip, and without hiding the x overflow the width: 0 will look just like width: auto.

To animate width like this you must hide x overflow and animate to an explicit width.

https://play.tailwindcss.com/qiHT7qfzNH

[liam-edwards]

Hmm... Is there anyway to combine this with the JIT functionality? The widths for what I'm using these for are different for each one so if I could do something like .animate-extend-[75%] that'd be cool.

Currently I'm not using the animation but I was using just the 0% state to set it to 0 and then having a transition smooth out it's climb back to its normal value.

[olets]

Not sure about that but you could add '100%': { width: '100%' } to the animation and then wrap each one in a different width limit. https://play.tailwindcss.com/2CHRq2KQxK The velocities will be different though. If they need to match you'll need to configure several animations or write a custom plugin that handles the duration-from-width math.