feat(tailwind): Add tailwind module

gaku-sei · Sep 5, 2020 · ef89b67 · ef89b67
1 parent 1e97b71
commit ef89b67
Show file tree

Hide file tree

Showing 3 changed files with 11,913 additions and 1 deletion.
diff --git a/src/Component/HTML/Utils.purs b/src/Component/HTML/Utils.purs
@@ -2,8 +2,13 @@ module Component.HTML.Utils where
 
 import Prelude
 import Data.Route (Route, routeCodec)
+import Halogen as H
 import Halogen.HTML.Properties as HP
 import Routing.Duplex (print)
+import Tailwind as TW
 
 href :: forall r i. Route -> HP.IProp ( href ∷ String | r ) i
 href = HP.href <<< append "#" <<< print routeCodec
+
+tw :: forall r i. Array TW.Tailwind -> HP.IProp ( class ∷ String | r ) i
+tw = HP.class_ <<< H.ClassName <<< TW.make
diff --git a/src/Page/Home.purs b/src/Page/Home.purs
@@ -8,6 +8,7 @@ import Data.Maybe (Maybe(..))
 import Data.Route (Route(..))
 import Halogen as H
 import Halogen.HTML as HH
+import Tailwind as TW
 
 data Action
   = Initialize
@@ -32,7 +33,7 @@ component =
   initialState = const { message: "", number: 0 }
 
   render { message, number } =
-    HH.div_
+    HH.div [ HPU.tw [ TW.m1 ] ]
       [ HH.div_ [ HH.text "Hello" ]
       , HH.div_ [ HH.text message ]
       , HH.div_ [ HH.text $ "Random number: " <> show number ]