Create Tailwind module

Moving the UI.tw function into Tailwind.use. Creating and consuming some
functions like Tailwind.if_ and Tailwind.when to make it easier to conditionally
style some of my components.

5 files changed, 49 insertions, 27 deletions

diff --git a/website/sandbox/learnpianochords/src/Overview.elm b/website/sandbox/learnpianochords/src/Overview.elm
index 021d15955d8c..628b52d79da9 100644
--- a/website/sandbox/learnpianochords/src/Overview.elm
+++ b/website/sandbox/learnpianochords/src/Overview.elm
@@ -5,6 +5,7 @@ import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Responsive
 import State
+import Tailwind
 import UI
 
 
@@ -16,7 +17,7 @@ header1 copy =
           , "pb-12"
           , Responsive.h1
           ]
-            |> UI.tw
+            |> Tailwind.use
             |> class
         ]
         [ text copy ]
@@ -29,7 +30,7 @@ header2 copy =
           , "pb-10"
           , Responsive.h2
           ]
-            |> UI.tw
+            |> Tailwind.use
             |> class
         ]
         [ text copy ]
@@ -41,7 +42,7 @@ paragraph copy =
         [ [ "pb-10"
           , Responsive.h3
           ]
-            |> UI.tw
+            |> Tailwind.use
             |> class
         ]
         [ text copy ]
@@ -59,15 +60,15 @@ numberedList items =
           , "list-decimal"
           , Responsive.h3
           ]
-            |> UI.tw
+            |> Tailwind.use
             |> class
         ]
-        (items |> List.map (\x -> li [ [ "pb-10" ] |> UI.tw |> class ] [ text x ]))
+        (items |> List.map (\x -> li [ [ "pb-10" ] |> Tailwind.use |> class ] [ text x ]))
 
 
 render : State.Model -> Html State.Msg
 render model =
-    div [ [ "container", "mx-auto" ] |> UI.tw |> class ]
+    div [ [ "container", "mx-auto" ] |> Tailwind.use |> class ]
         [ header1 "Welcome to LearnPianoChords.app!"
         , paragraph """
                      Learn Piano Chords helps piano players master chords.
@@ -110,7 +111,7 @@ render model =
                    """
                 ]
             ]
-        , div [ [ "text-center", "py-20" ] |> UI.tw |> class ]
+        , div [ [ "text-center", "py-20" ] |> Tailwind.use |> class ]
             [ UI.simpleButton
                 { label = "Let's get started"
                 , handleClick = State.SetView State.Preferences
diff --git a/website/sandbox/learnpianochords/src/Preferences.elm b/website/sandbox/learnpianochords/src/Preferences.elm
index e90a669c21f2..83d4f97e24d5 100644
--- a/website/sandbox/learnpianochords/src/Preferences.elm
+++ b/website/sandbox/learnpianochords/src/Preferences.elm
@@ -6,6 +6,7 @@ import Html.Events exposing (..)
 import Icon
 import Responsive
 import State
+import Tailwind
 import Tempo
 import Theory
 import UI
@@ -105,7 +106,7 @@ keyCheckboxes model =
               , "pt-10"
               , Responsive.h2
               ]
-                |> UI.tw
+                |> Tailwind.use
                 |> class
             ]
             [ text "Select keys" ]
@@ -134,7 +135,7 @@ closePreferences =
           , "top-0"
           , "z-10"
           ]
-            |> UI.tw
+            |> Tailwind.use
             |> class
         , onClick (State.SetView State.Practice)
         ]
diff --git a/website/sandbox/learnpianochords/src/Tailwind.elm b/website/sandbox/learnpianochords/src/Tailwind.elm
new file mode 100644
index 000000000000..57d419db5a82
--- /dev/null
+++ b/website/sandbox/learnpianochords/src/Tailwind.elm
@@ -0,0 +1,29 @@
+module Tailwind exposing (..)
+
+{-| Functions to make Tailwind development in Elm even more pleasant.
+-}
+
+
+{-| Conditionally use `class` selection when `condition` is true.
+-}
+when : Bool -> String -> String
+when condition class =
+    if condition then
+        class
+
+    else
+        ""
+
+
+if_ : Bool -> String -> String -> String
+if_ condition whenTrue whenFalse =
+    if condition then
+        whenTrue
+
+    else
+        whenFalse
+
+
+use : List String -> String
+use styles =
+    String.join " " styles
diff --git a/website/sandbox/learnpianochords/src/Tempo.elm b/website/sandbox/learnpianochords/src/Tempo.elm
index a1afd776acb4..041313614f53 100644
--- a/website/sandbox/learnpianochords/src/Tempo.elm
+++ b/website/sandbox/learnpianochords/src/Tempo.elm
@@ -4,6 +4,7 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Responsive
+import Tailwind
 import UI
 
 
@@ -20,7 +21,7 @@ render { tempo, handleInput } =
             [ [ "py-10"
               , Responsive.h2
               ]
-                |> UI.tw
+                |> Tailwind.use
                 |> class
             ]
             [ text (String.fromInt tempo ++ " BPM") ]
diff --git a/website/sandbox/learnpianochords/src/UI.elm b/website/sandbox/learnpianochords/src/UI.elm
index 4fa8f65fb54c..50bbaaa2142d 100644
--- a/website/sandbox/learnpianochords/src/UI.elm
+++ b/website/sandbox/learnpianochords/src/UI.elm
@@ -4,6 +4,7 @@ import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Responsive
+import Tailwind
 
 
 type Color
@@ -31,11 +32,6 @@ textForColor color =
             "text-black"
 
 
-tw : List String -> String
-tw styles =
-    String.join " " styles
-
-
 simpleButton :
     { label : String
     , handleClick : msg
@@ -57,7 +53,7 @@ simpleButton { label, handleClick, color, classes } =
             ]
     in
     button
-        [ class (tw <| List.concat [ buttonClasses, classes ])
+        [ class (Tailwind.use <| List.concat [ buttonClasses, classes ])
         , onClick handleClick
         ]
         [ text label ]
@@ -90,7 +86,7 @@ textToggleButton { label, toggled, handleClick, classes } =
             ]
     in
     button
-        [ class (tw <| List.concat [ buttonClasses, classes ])
+        [ class (Tailwind.use <| List.concat [ buttonClasses, classes ])
         , onClick handleClick
         ]
         [ text label ]
@@ -116,7 +112,7 @@ textField { placeholderText, handleInput, classes } =
             ]
     in
     input
-        [ class (tw <| List.concat [ inputClasses, classes ])
+        [ class (Tailwind.use <| List.concat [ inputClasses, classes ])
         , onInput handleInput
         , placeholder placeholderText
         ]
@@ -139,17 +135,11 @@ overlayButton { label, handleClick, isVisible } =
             , "z-30"
             , "w-screen"
             , "h-screen"
+            , Tailwind.if_ isVisible "opacity-100" "opacity-0"
             ]
-
-        extraClasses =
-            if isVisible then
-                [ "opacity-100" ]
-
-            else
-                [ "opacity-0" ]
     in
     button
-        [ List.concat [ classes, extraClasses ] |> tw |> class
+        [ classes |> Tailwind.use |> class
         , style "background-color" "rgba(0,0,0,0.30)"
         , onClick handleClick
         ]
@@ -157,7 +147,7 @@ overlayButton { label, handleClick, isVisible } =
             [ style "-webkit-text-stroke-width" "2px"
             , style "-webkit-text-stroke-color" "black"
             , class <|
-                tw
+                Tailwind.use
                     [ "transform"
                     , "-rotate-90"
                     , "text-white"