How to make it work with tailwindcss (add to the wiki)

[andrewmacmurray]

How to make it work with tailwindcss (add to the wiki)

[rolojf]

Sure, this weekend I hope to have it ready.

[andrewMacmurray]

Hi Rolando, that's awesome! I wonder if we could add a built in helper to the Animated module that wraps what you've done above:

import Html.Styled as Htmls
import Html.Styled.Attributes as Attr
import Simple.Animation exposing (Animation)
import Simple.Animation.Animated as Animated



animatedStyleNode :
    (List (Htmls.Attribute msg) -> List (Htmls.Html msg) -> Htmls.Html msg)
    -> Animation
    -> List (Htmls.Attribute msg)
    -> List (Htmls.Html msg)
    -> Htmls.Html msg
animatedStyleNode =
    Animated.elmCss
        { text = Htmls.text
        , node = Htmls.node
        , class = Attr.class
        }

[rolojf]

Yes!, I think I would be a great addition to the package.
Just some thoughts:
Maybe it's a good idea to think again if the class is needed at all.
I understand that with other implementations, the css it's linked to the class of this node.
But in elm-css all the style added is directly through an inline style element.
Therefore, maybe it is not needed. All additional styling is already provided with other tailwind classes.
or ¿am i missing something? Hope I explained myself (not native English speaker)

[andrewMacmurray]

Great!

I'm not super familiar with the internals of elm-css so it's definitely worth a try - the stylesheet Animated.custom returns expects there to be a dom node with a specific class name so a keyframes animation can be applied:

@keyframes anim-1000infinite-y-0-y-5 {
   0% { transform: translateY(0px) }
   100% { transform: translateY(5px) }
}

.anim-1000infinite-y-0-y-5 {
   animation-name: anim-1000infinite-y-0-y-5;
   animation-iteration-count: infinite;
   animation-duration: 1000ms;
}

Happy for you to make a PR if you have time?