Update tailwind setup and copy over raw form for reference.

examples/pokedex/.gitignore

@@ -5,3 +5,4 @@ dist/
 .elm-pages/
 functions/render/
 functions/server-render/
+gen/

examples/pokedex/elm.json

@@ -4,7 +4,8 @@
         "src",
         "../../src",
         ".elm-pages",
-        "../../plugins"
+        "../../plugins",
+        "gen"
     ],
     "elm-version": "0.19.1",
     "dependencies": {
@@ -28,7 +29,6 @@
             "elm-community/dict-extra": "2.4.0",
             "elm-community/list-extra": "8.3.0",
             "jluckyiv/elm-utc-date-strings": "1.0.0",
-            "matheus23/elm-default-tailwind-modules": "2.0.1",
             "miniBill/elm-codec": "1.2.0",
             "noahzgordon/elm-color-extra": "1.0.2",
             "pablohirafuji/elm-syntax-highlight": "3.4.0",

examples/pokedex/package.json

@@ -11,9 +11,13 @@
   "license": "BSD-3",
   "devDependencies": {
     "@netlify/functions": "^0.7.2",
+    "@tailwindcss/forms": "^0.3.4",
     "busboy": "^1.1.0",
     "cookie": "^0.4.1",
     "elm-pages": "file:../..",
-    "elm-tooling": "^1.3.0"
+    "elm-tailwind-modules": "^0.3.2",
+    "elm-tooling": "^1.3.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^2.2.19"
   }
 }

examples/pokedex/public/style.css

@@ -5,6 +5,8 @@ body {
   font-family: "Inter var" !important;
 }
 
+/*
+
 input:invalid {
   border: 2px dashed red;
 }
@@ -13,8 +15,18 @@ input:valid {
   border: 2px solid black;
 }
 
-html,
-body {
+*/
+
+input {
+  border-radius: 10px !important;
+  border-color: #ccc !important;
+}
+
+main.color-app {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -23,20 +35,13 @@ body {
   padding: 0;
 }
 
-body {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  min-height: 100vh;
-}
-
-main {
+main.color-app {
   background: rgba(0, 0, 0, 0.15);
   border-radius: 0.8em;
   padding: 0.8em;
 }
 
-.content {
+main.color-app .content {
   background: rgba(255, 255, 255, 0.9);
   border-radius: 0.5em;
   max-width: 90vw;
@@ -45,22 +50,22 @@ main {
   color: var(--selected-color);
 }
 
-.content h1 {
+main.color-app .content h1 {
   margin: 0;
 }
 
-.content ul {
+main.color-app .content ul {
   list-style: none;
   padding: 0;
 }
 
-.content li {
+main.color-app .content li {
   margin-left: -1rem;
   margin-right: -1rem;
   padding: 1rem;
 }
 
-.content li:nth-child(odd) {
+main.color-app .content li:nth-child(odd) {
   background: rgb(100 10 80 / 0.1);
 }
 

examples/pokedex/src/ColorHelpers.elm

@@ -67,7 +67,10 @@ view toCssVal maybeUrl sharedModel static =
             []
             [ Html.text <| "::root { --selected-color: " ++ cssVal ++ "} body { background-color: " ++ cssVal ++ "}"
             ]
-        , Html.main_ [ Attr.style "background-color" cssVal ]
+        , Html.main_
+            [ Attr.style "background-color" cssVal
+            , Attr.class "color-app"
+            ]
             [ Html.div
                 [ Attr.class "content"
                 ]

examples/pokedex/src/Icon.elm

@@ -1,4 +1,4 @@
-module Icon exposing (error)
+module Icon exposing (error, icon2, icon3)
 
 import Html.Styled exposing (Html)
 import Svg.Styled exposing (path, svg)
@@ -24,3 +24,42 @@ error =
             ]
             []
         ]
+
+
+icon2 =
+    svg
+        [ SvgAttr.css
+            [ Tw.h_full
+            , Tw.w_full
+            , Tw.text_gray_300
+            ]
+        , SvgAttr.fill "currentColor"
+        , SvgAttr.viewBox "0 0 24 24"
+        ]
+        [ path
+            [ SvgAttr.d "M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
+            ]
+            []
+        ]
+
+
+icon3 =
+    svg
+        [ SvgAttr.css
+            [ Tw.mx_auto
+            , Tw.h_12
+            , Tw.w_12
+            , Tw.text_gray_400
+            ]
+        , SvgAttr.stroke "currentColor"
+        , SvgAttr.fill "none"
+        , SvgAttr.viewBox "0 0 48 48"
+        ]
+        [ path
+            [ SvgAttr.d "M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
+            , SvgAttr.strokeWidth "2"
+            , SvgAttr.strokeLinecap "round"
+            , SvgAttr.strokeLinejoin "round"
+            ]
+            []
+        ]

examples/pokedex/tailwind.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  theme: {},
+  variants: [],
+  plugins: [require("@tailwindcss/forms")],
+};