Matheus23/elm-tailwind-modules and formCheckbox

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:

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


Hint: Read <> to see how `import`
declarations work in Elm.
1 Like

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:

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


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 =

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

view : Model -> Html Msg
view model =
        [ Attributes.css [ Tw.block ]
        [ 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
                    , "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 =

main : Program Json.Encode.Value Model Msg
main =
        { init = init
        , view = view >> Html.Styled.toUnstyled
        , update = update
        , subscriptions = subscriptions

1 Like

Thanks for the SSCCE, I’ve created an ellie for this issue:

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

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

1 Like

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

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

1 Like

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