Matheus23/elm-tailwind-modules and formCheckbox

Learn
1

I want to “translate” this example

<input type="checkbox" class="form-checkbox rounded text-pink-500" />

(source: GitHub - tailwindlabs/tailwindcss-forms) into elm, using matheus23/elm-default-tailwind-modules:

    input
        [ Attributes.css
            [ Tailwind.Utilities.form_checkbox
            , Tailwind.Utilities.rounded
            , Tailwind.Utilities.text_pink_500
            ]
        ]
        []

But there is no Tailwind.Utilities.form_checkbox or Tailwind.Utilities.formCheckbox. According to the Package, the forms-plugin is included. What I am missing? The compiler-message is:

I cannot find a `Tailwind.Utilities.form_checkbox` variable:

108|                 [ Tailwind.Utilities.form_checkbox
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
The `Tailwind.Utilities` module does not expose a `form_checkbox` variable.
These names seem close though:

    Tailwind.Utilities.from_black
    Tailwind.Utilities.font_black
    Tailwind.Utilities.font_semibold
    Tailwind.Utilities.from_current

Hint: Read <https://elm-lang.org/0.19.1/imports> to see how `import`
declarations work in Elm.
1 Like
2

Hello @hans-helmut !

There’s two modes in which the tailwindcss/forms plugin can operate. The basic strategy and the class strategy (see this section of the project’s readme).

elm-default-tailwind-modules uses the forms plugin in its default configuration (see here). Thus, classes like form_checkbox won’t be generated.

With default settings, the styles will just be applied to your input element automatically. This should already work:

    input
        [ Attributes.type_ "checkbox"
        , Attributes.css
            [ Tailwind.Utilities.rounded
            , Tailwind.Utilities.text_pink_500
            ]
        ]
        []

If you’ve included the global styles somewhere in your html :slight_smile:

2 Likes
3

Hello @Philipp_Krueger,

thanks for your help. In fact, I missed the global styles .

But the checkbox stays small and blue, not big and pink as expected.

Screenshot_2021-04-24 Main(1)

I created a “small” complete example. What is missing?

module Main exposing (main)

import Browser
import Css
import Css.Global
import Html.Styled exposing (..)
import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events
import Json.Encode
import Tailwind.Utilities as Tw


type Msg
    = CheckboxMsg Bool


type alias Model =
    Bool
    


update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
    case msg of
        CheckboxMsg b ->
            ( b, Cmd.none )


view : Model -> Html Msg
view model =
    div
        [ Attributes.css [ Tw.block ]
        ]
        [ Css.Global.global Tw.globalStyles
        , div [ Attributes.css
            [ Tw.text_pink_500]]
            [ label
                [ Attributes.for "checkme"
                ]
                [ input
                    [ Attributes.type_ "checkbox"
                    , Attributes.css
                        [ Tw.rounded
                        , Tw.text_pink_500
                        , Tw.h_8
                        , Tw.w_8
                        ]
                    , Attributes.id "checkme"
                    , Attributes.checked model
                    , Events.onCheck CheckboxMsg
                    ]
                    []
                , span
                    [ Attributes.css
                        [ Tw.ml_4
                        , Tw.text_xl
                        , Tw.text_pink_500
                        ]
                    ]
                    [ text "Check me" ]
                ]
            ]
        ]


init : Json.Encode.Value -> ( Model, Cmd msg )
init flags =
    ( True, Cmd.none )


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


main : Program Json.Encode.Value Model Msg
main =
    Browser.element
        { init = init
        , view = view >> Html.Styled.toUnstyled
        , update = update
        , subscriptions = subscriptions
        }
1 Like
4

Thanks for the SSCCE, I’ve created an ellie for this issue: https://ellie-app.com/cZQHzPRWmxGa1

Yeah, sorry. This is due to tailwindcss’s reliance on ordering of CSS, and this is a particularly tricky case of it.
Unfortunately, elm-tailwind-modules can’t control the ordering of the final CSS, because that’s in the user’s control with elm-css. I’m working on fixing that.

In the mean time, you can use Css.important Tw.text_pink_500 to work around the issue.

Please keep up to date for a new version of elm-tailwind-modules :slight_smile:

1 Like
5

Hello @Philipp_Krueger!
Thank you very much, now it works as expected.

1 Like
6

Hello @hans-helmut ,
I wasn’t quite pleased with the use of Css.important, so I changed the way elm-default-tailwind-modules are generated and am now generating the forms plugin using the “class” strategy.
This means, there are now definitions like form_checkbox generated.

Please check out version 2.0.1 and tell me what you think :slight_smile:

1 Like
7

Hello @Philipp_Krueger.
yes, seems to work very well so far. Thank you very much.

1 Like
8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.