group class and group variants

[thetechnaddict]

So the group class in Tailwindcss - here's how I understand it, but I can't find it's definition in the documentation... and it does not appear to be implemented in elm-tailwind-modules perhaps there is a work-around in elm-css?

For example , an item has 2 elements
One is an icon , and the other is text (a sidebar nav link for instance)

When you hover the item, how can you let item's contents change styles trigger by a-hover ?

So you need a group class.
div .group .green .hover:blue
svg .white .group-hover:gray
text .white .group-hover:gray

When you hover on div
group-hover can let element trigger by hover under class 'group'

[matheus23]

For reference, this tailwindcss example generates this css:

.group:hover .group-hover\:text-gray-900 {
	--tw-text-opacity: 1;
	color: rgba(17, 24, 39, var(--tw-text-opacity));
}
.group:hover .group-hover\:text-gray-500 {
	--tw-text-opacity: 1;
	color: rgba(107, 114, 128, var(--tw-text-opacity));
}

---

This CSS depends on a global name (.group), and I try to keep elm-tailwind-modules free from global names generally. However, if you want to, you can re-create this CSS using elm-css.

The above example

<div class="group border-indigo-500 hover:bg-white hover:shadow-lg hover:border-transparent ...">
  <p class="text-indigo-600 group-hover:text-gray-900 ...">New Project</p>
  <p class="text-indigo-500 group-hover:text-gray-500 ...">Create a new project from a variety of starting templates.</p>
</div>

can be translated to:

import Css
import Css.Global
import Html.Styled as Html
import Html.Styled.Attributes as Attr
import Tailwind.Utilities as Tw


view =
    Html.div
        [ Attr.class "group"
        , Attr.css
            [ Tw.border_indigo_500
            , Css.hover
                [ Tw.shadow_lg
                , Tw.border_transparent
                ]
            ]
        ]
        [ Html.p
            [ Attr.css
                [ Tw.text_indigo_600
                , Css.Global.selector ".group:hover"
                    [ Tw.text_gray_900 ]
                ]
            ]
            [ Html.text "New Project" ]
        , Html.p
            [ Attr.css
                [ Tw.text_indigo_500
                , Css.Global.selector ".group:hover"
                    [ Tw.text_gray_500 ]
                ]
            ]
            [ Html.text "Create a new project from a variety of starting templates." ]
        ]

Hope that helps :)

---

There's an open question here, whether this can be implemented without global class names, but I'm not sure whether it is right now. (Maybe the better question is "how".)

Let me know if this is a satisfactory solution for your cases or if you have an idea on how to implement this.

[thetechnaddict]

Thanks Phillip - and when on holiday too...

I thought I had to use Global.descendants to get to the members of the group.

I sort of understand Global, but not really (being an elm-css innocent) - here we defining hover on .group and it will have that style everywhere - so should we be using very specific class names - like sidebar-nav-group and then select-button-group or some such

Or if we define it in one place in one way and in another place a different way will it take the local definition on hover?

[matheus23]

Thanks Phillip - and when on holiday too...

Haha! No problem, I just came back :)

---

Oh yes! Excuse my incorrect elm-css code, it doesn't compile.

I've taken another look at this problem, and indeed at the moment it's impossible to translate to elm-css directly (see rtfeldman/elm-css#338).

Unfortunately, you'll need to resort to a solution where you need to name all your children with a globally-scoped name:

Html.div
    [ Attr.css
        [ Tw.border_indigo_500
        , Css.hover
            [ Tw.shadow_lg
            , Tw.border_transparent
            , Css.Global.descendants
                [ Css.Global.selector ".paragraph-1"
                    [ Tw.text_gray_900 ]
                , Css.Global.selector ".paragraph-2"
                    [ Tw.text_gray_500 ]
                ]
            ]
        ]
    ]
    [ Html.p
        [ Attr.class "paragraph-1"
        , Attr.css
            [ Tw.text_indigo_600
            ]
        ]
        [ Html.text "New Project" ]
    , Html.p
        [ Attr.class "paragraph-2"
        , Attr.css
            [ Tw.text_indigo_500
            ]
        ]
        [ Html.text "Create a new project from a variety of starting templates." ]
    ]

Certainly not ideal, but it seems like a limitation of elm-css.

I wonder if there's a way to provide a nicer API 🤔 although it seems impossible.

[thetechnaddict]

agh well - here's the reference I was directed to, incidentally: https://elmcsspatterns.io/input/dropdown

[thetechnaddict]

focus-within prefix

<form>
  <div class="text-gray-400 focus-within:text-gray-600 ...">
    <div class="...">
      <svg fill="currentColor"></svg>
    </div>
    <input class="focus:ring-2 focus:ring-gray-300 ...">
  </div>
</form>

I'm guessing this is another one that requires Global.selector and Global.descendants to work, hence it is not implemented.

I don't know if it is useful to list these or not - let me know

[matheus23]

focus-within is a standard CSS feature. You can use it in elm-css. Instead of using Css.focus, you'd use Css.pseudoClass "focus-within".

[thetechnaddict]

Agh, thank you -