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

[rolojf]

First of all, thanks for this Andrew.

I want to share some code that I think It's working for me. Please consider (after making any changes you think necessary) making it available for others on the wiki, or readme or any where you see fit. I know you give concise instructions about this, in the documentation. But having this code available, might save some time and make it easy to adopt this package.

The code is about using Simple.Animation.Animated.custom with the packages: rffeldman/elm-css and matheus23/elm-default-tailwind-modules.

Here is it:

import Html.Styled as Htmls exposing (Html, div, text)
import Html.Styled.Attributes as Attr exposing (class, css)
import Tailwind.Utilities as Tw

animaStyleNode :
    (List (Htmls.Attribute msg) -> List (Htmls.Html msg) -> Htmls.Html msg)
    -> Animation
    -> List (Htmls.Attribute msg)
    -> List (Htmls.Html msg)
    -> Htmls.Html msg
animaStyleNode node animation attributes children =
    Animated.custom
        (\className stylesheet ->
            node
                (class className :: attributes)
                (Htmls.node
                    "style"
                    []
                    [ text stylesheet ]
                    :: children
                )
        )
        animation

htmlsExample : Htmls.Html msg
htmlsExample =
    animaStyleNode div
        flash
        [ css [ Tw.text_white, Tw.text_center, Tw.mx_4, Tw.p_6 ] ]
        [ text "I'm animating!" ]

flash : Animation
flash =
    Animation.steps
        { startAt = [ P.opacity 0, P.backgroundColor "#0382c8" ]
        , options = [ Animation.loop ]
        }
        [ Animation.step 1000 [ P.opacity 1, P.backgroundColor "rgb(19 228 187)" ]
        , Animation.step 1000 [ P.opacity 0, P.backgroundColor "#0382c8" ]
        ]

I think this way of styling (with tailwindcss) is gaining momentum. A am also very interested in seeing what changes you would make to the code.

Regards,

[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?

[rolojf]

Sure, this weekend I hope to have it ready.