Created
October 30, 2025 12:43
-
-
Save alexshd/373c9f114d9d18386b371aa84e9d2cb1 to your computer and use it in GitHub Desktop.
ELM, Tailwindcss for VSCode - Helpers and Settings
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "tailwindCSS.experimental.configFile": null, | |
| "tailwindCSS.includeLanguages": { | |
| "elm": "html" | |
| }, | |
| // Enhanced class attribute detection for Elm | |
| "tailwindCSS.classAttributes": ["class", "className", "classList", ".*[Cc]lass.*"], | |
| // Regex patterns to detect Tailwind classes in Elm | |
| "tailwindCSS.experimental.classRegex": [ | |
| // Matches: class "bg-blue-500 text-white" | |
| "class\\s+\"([^\"]*)", | |
| // Matches: css "bg-blue-500 text-white" (for custom helpers) | |
| "css\\s+\"([^\"]*)", | |
| // Matches: tw "bg-blue-500 text-white" (for custom helpers) | |
| "tw\\s+\"([^\"]*)", | |
| // Matches: classList [("bg-blue-500", True)] | |
| "classList\\s+\\[.*?\"([^\"]*)", | |
| // Matches: Html.Attributes.class "bg-blue-500" | |
| "\\.class\\s+\"([^\"]*)" | |
| ], | |
| "css.validate": false, | |
| "editor.quickSuggestions": { | |
| "strings": true | |
| }, | |
| "editor.inlineSuggest.enabled": true, | |
| "github.copilot.enable": { | |
| "*": true, | |
| "elm": true, | |
| "css": true | |
| }, | |
| // Tell Copilot about Tailwind v4 | |
| "files.associations": { | |
| "*.css": "tailwindcss" | |
| }, | |
| "emmet.includeLanguages": { | |
| "elm": "html", | |
| "css": "tailwindcss" | |
| }, | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module TailwindAdvanced exposing (styled, StyledConfig, defaultStyle) | |
| {-| Advanced Tailwind helper with record syntax for maximum IntelliSense support | |
| This approach uses records to provide better IntelliSense while maintaining | |
| the flexibility of Tailwind classes. | |
| # Advanced Styling | |
| @docs styled, StyledConfig, defaultStyle | |
| -} | |
| import Html exposing (Attribute) | |
| import Html.Attributes as Attr | |
| {-| Configuration record for styled components | |
| -} | |
| type alias StyledConfig = | |
| { base : String -- Base classes: "flex items-center" | |
| , background : String -- Background: "bg-blue-500" | |
| , text : String -- Text styling: "text-white font-bold" | |
| , spacing : String -- Padding/margin: "p-4 m-2" | |
| , border : String -- Border styling: "border border-gray-300 rounded-lg" | |
| , layout : String -- Layout: "w-full h-12" | |
| , responsive : String -- Responsive: "sm:text-lg md:p-6" | |
| , hover : String -- Hover states: "hover:bg-blue-600" | |
| , focus : String -- Focus states: "focus:ring-2 focus:ring-blue-500" | |
| , animation : String -- Animations: "transition-all duration-300" | |
| , custom : String -- Custom classes: "custom-class" | |
| } | |
| {-| Default empty styling | |
| -} | |
| defaultStyle : StyledConfig | |
| defaultStyle = | |
| { base = "" | |
| , background = "" | |
| , text = "" | |
| , spacing = "" | |
| , border = "" | |
| , layout = "" | |
| , responsive = "" | |
| , hover = "" | |
| , focus = "" | |
| , animation = "" | |
| , custom = "" | |
| } | |
| {-| Create styled attributes from configuration | |
| div | |
| [ styled | |
| { defaultStyle | |
| | background = "bg-blue-500" | |
| , text = "text-white font-bold" | |
| , spacing = "p-4" | |
| , border = "rounded-lg" | |
| , hover = "hover:bg-blue-600" | |
| } | |
| ] | |
| [ text "Styled button" ] | |
| -} | |
| styled : StyledConfig -> Attribute msg | |
| styled config = | |
| [ config.base | |
| , config.background | |
| , config.text | |
| , config.spacing | |
| , config.border | |
| , config.layout | |
| , config.responsive | |
| , config.hover | |
| , config.focus | |
| , config.animation | |
| , config.custom | |
| ] | |
| |> List.filter (not << String.isEmpty) | |
| |> String.join " " | |
| |> Attr.class |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module TailwindHelpers exposing | |
| ( css, tw, classes | |
| , conditionalClass | |
| , responsiveClass | |
| ) | |
| {-| Enhanced Tailwind CSS helpers for Elm | |
| This module provides helper functions that make it easier to work with | |
| Tailwind CSS classes in Elm while maintaining IntelliSense support. | |
| # Basic Helpers | |
| @docs css, tw, classes | |
| # Conditional Helpers | |
| @docs conditionalClass | |
| # Responsive Helpers | |
| @docs responsiveClass | |
| -} | |
| import Html exposing (Attribute) | |
| import Html.Attributes as Attr | |
| {-| Simple css helper that works with Tailwind IntelliSense | |
| div [ css "bg-blue-500 text-white p-4" ] [ text "Hello" ] | |
| -} | |
| css : String -> Attribute msg | |
| css = | |
| Attr.class | |
| {-| Alias for css - shorter and feels more "Tailwind-y" | |
| div [ tw "flex items-center justify-center h-screen" ] [] | |
| -} | |
| tw : String -> Attribute msg | |
| tw = | |
| Attr.class | |
| {-| Combine multiple class strings with spaces | |
| div | |
| [ classes | |
| [ "bg-white" | |
| , "shadow-lg" | |
| , "rounded-lg p-6" | |
| ] | |
| ] | |
| [] | |
| -} | |
| classes : List String -> Attribute msg | |
| classes classList = | |
| classList | |
| |> String.join " " | |
| |> Attr.class | |
| {-| Conditionally apply classes | |
| div | |
| [ conditionalClass | |
| [ ( "bg-green-500", isSuccess ) | |
| , ( "bg-red-500", isError ) | |
| , ( "bg-gray-500", True ) -- always applied | |
| ] | |
| ] | |
| [] | |
| -} | |
| conditionalClass : List ( String, Bool ) -> Attribute msg | |
| conditionalClass conditions = | |
| conditions | |
| |> List.filter Tuple.second | |
| |> List.map Tuple.first | |
| |> String.join " " | |
| |> Attr.class | |
| {-| Responsive classes helper | |
| div | |
| [ responsiveClass | |
| { base = "text-sm" | |
| , sm = Just "text-base" | |
| , md = Just "text-lg" | |
| , lg = Just "text-xl" | |
| , xl = Nothing | |
| } | |
| ] | |
| [] | |
| -} | |
| responsiveClass : | |
| { base : String | |
| , sm : Maybe String | |
| , md : Maybe String | |
| , lg : Maybe String | |
| , xl : Maybe String | |
| } | |
| -> Attribute msg | |
| responsiveClass config = | |
| [ Just config.base | |
| , Maybe.map (\c -> "sm:" ++ c) config.sm | |
| , Maybe.map (\c -> "md:" ++ c) config.md | |
| , Maybe.map (\c -> "lg:" ++ c) config.lg | |
| , Maybe.map (\c -> "xl:" ++ c) config.xl | |
| ] | |
| |> List.filterMap identity | |
| |> String.join " " | |
| |> Attr.class |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment