Did any one use this library with keyframes defined in a tailwind.config.cjs file - when using Sveltekit+tailwind css?

[alexbjorlig]

I tried adding keyframes in the tailwind config, but when using in Saos it does not work.

tailwind.config.cjs

theme: {
  extend: {
    keyframes: {
       'slide-left': {
         '0%': {
	  transfrom: 'opacity: 0;',
	  opacity: 0
	 },
	 '100%': {
	   transfrom: 'translateX(0)',
	   opacity: 100
	 }
      }
    }
  }
}

In svelte component:

<Saos animation={'-global-slide-left 0.5s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}>
  <span>Should work?</span>
</Saos> 

I tried both with and without -global, but no success.

[shiryel]

@alexbjorlig I did not tested it with tailwind, but one thing that you need to keep in mind, is that the svelte CSS has the -global- because is how svelte understand that you want a global css (the default is local, therefore can't be called from other components), also, the component should be:

<Saos animation={'slide-left 0.5s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}>
  <span>Should work?</span>
</Saos> 

As, I don't think tailwind config is pre-processed by svelte, you need to search how to make a animation global (if its not the default), and how to call it from svelte

[alexbjorlig]

I will give it a try - thanks.