feat(tailwind): Add tailwind generator

gaku-sei · Sep 9, 2020 · 5b245b3 · 5b245b3
1 parent abacc6f
commit 5b245b3
Show file tree

Hide file tree

Showing 8 changed files with 1,208 additions and 32 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,7 @@
 /.purs*
 /.psa*
 /.spago
+
+# Tailwind
+/dev/styles.css
+/src/Tailwind.purs
diff --git a/assets/input.css b/assets/input.css
@@ -0,0 +1,9 @@
+/* purgecss start ignore */
+
+@tailwind base;
+
+@tailwind components;
+
+/* purgecss end ignore */
+
+@tailwind utilities;
diff --git a/dev/index.html b/dev/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link href="/styles.css" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Pure Halogen Starter</title>
   </head>

diff --git a/package.json b/package.json
@@ -5,9 +5,14 @@
   "author": "Kevin COMBRIAT <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "start": "parcel dev/index.html"
+    "start": "parcel dev/index.html",
+    "tailwind:generate": "tailwind-generator -l purescript -c ./tailwind.config.js --cssInput ./assets/input.css --cssOutput ./dev/styles.css --output ./src/"
   },
   "dependencies": {
+    "@scoville/tailwind-generator": "https://github.com/scoville/tailwind-generator",
     "parcel-bundler": "^1.12.4"
+  },
+  "devDependencies": {
+    "tailwind": "^4.0.0"
   }
 }
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 <<< 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
@@ -3,12 +3,14 @@ module Page.Home where
 import Prelude
 import Capability.Navigate (class Navigate)
 import Capability.Random (class Random, rand)
+import Component.HTML.Utils as HU
 import Component.Link (link)
 import Control.Monad.Reader (class MonadAsk, asks)
 import Data.Maybe (Maybe(..))
 import Data.Route (Route(..))
 import Halogen as H
 import Halogen.HTML as HH
+import Tailwind as TW
 
 data Action
   = Initialize
@@ -34,7 +36,7 @@ component =
   initialState = const { message: "", number: 0 }
 
   render { message, number } =
-    HH.div_
+    HH.div [ HU.tw [ TW.m1 ] ]
       [ HH.div_ [ HH.text "Hello" ]
       , HH.div_ [ HH.text message ]
       , HH.div_ [ HH.text $ "Random number: " <> show number ]

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,123 @@
+module.exports = {
+  future: {
+    purgeLayersByDefault: true,
+    removeDeprecatedGapUtilities: true,
+  },
+  purge: [],
+  theme: {
+    extend: {},
+  },
+  variants: {
+    accessibility: ["focus"],
+    alignContent: [],
+    alignItems: [],
+    alignSelf: [],
+    appearance: [],
+    backgroundAttachment: [],
+    backgroundClip: [],
+    backgroundColor: ["hover", "focus"],
+    backgroundImage: [],
+    gradientColorStops: ["hover", "focus"],
+    backgroundOpacity: ["hover", "focus"],
+    backgroundPosition: [],
+    backgroundRepeat: [],
+    backgroundSize: [],
+    borderCollapse: [],
+    borderColor: ["hover", "focus"],
+    borderOpacity: ["hover", "focus"],
+    borderRadius: [],
+    borderStyle: [],
+    borderWidth: [],
+    boxShadow: ["hover", "focus"],
+    boxSizing: [],
+    container: [],
+    cursor: [],
+    display: [],
+    divideColor: [],
+    divideOpacity: [],
+    divideStyle: [],
+    divideWidth: [],
+    fill: [],
+    flex: [],
+    flexDirection: [],
+    flexGrow: [],
+    flexShrink: [],
+    flexWrap: [],
+    float: [],
+    clear: [],
+    fontFamily: [],
+    fontSize: [],
+    fontSmoothing: [],
+    fontVariantNumeric: [],
+    fontStyle: [],
+    fontWeight: ["hover", "focus"],
+    height: [],
+    inset: [],
+    justifyContent: [],
+    justifyItems: [],
+    justifySelf: [],
+    letterSpacing: [],
+    lineHeight: [],
+    listStylePosition: [],
+    listStyleType: [],
+    margin: [],
+    maxHeight: [],
+    maxWidth: [],
+    minHeight: [],
+    minWidth: [],
+    objectFit: [],
+    objectPosition: [],
+    opacity: ["hover", "focus"],
+    order: [],
+    outline: ["focus"],
+    overflow: [],
+    overscrollBehavior: [],
+    padding: [],
+    placeContent: [],
+    placeItems: [],
+    placeSelf: [],
+    placeholderColor: ["focus"],
+    placeholderOpacity: ["focus"],
+    pointerEvents: [],
+    position: [],
+    resize: [],
+    space: [],
+    stroke: [],
+    strokeWidth: [],
+    tableLayout: [],
+    textAlign: [],
+    textColor: ["hover", "focus"],
+    textOpacity: ["hover", "focus"],
+    textDecoration: ["hover", "focus"],
+    textTransform: [],
+    userSelect: [],
+    verticalAlign: [],
+    visibility: [],
+    whitespace: [],
+    width: [],
+    wordBreak: [],
+    zIndex: [],
+    gap: [],
+    gridAutoFlow: [],
+    gridTemplateColumns: [],
+    gridColumn: [],
+    gridColumnStart: [],
+    gridColumnEnd: [],
+    gridTemplateRows: [],
+    gridRow: [],
+    gridRowStart: [],
+    gridRowEnd: [],
+    transform: [],
+    transformOrigin: [],
+    scale: ["hover", "focus"],
+    rotate: ["hover", "focus"],
+    translate: ["hover", "focus"],
+    skew: ["hover", "focus"],
+    transitionProperty: [],
+    transitionTimingFunction: [],
+    transitionDuration: [],
+    transitionDelay: [],
+    animation: [],
+  },
+  plugins: [],
+};