ELM Land with tailwindcss setup files

README.md

Help

Commands Flow

$ elm-land init ${ProjectName}
$ cd ${ProjectName}
$ elm-land server 

will whow the url 

TailwindCSS

# using the CLI tool 
yarn tailwindcss -c ./tailwind.config.js -i ./src/style.css -o ./static/style.css --watch 

elm-land.json

{
  "app": {
    "elm": {
      "development": { "debugger": true },
      "production": { "debugger": false }
    },
    "env": [],
    "html": {
      "attributes": {
        "html": { "lang": "en" },
        "head": {}
      },
      "title": "Elm Land",
      "meta": [
        { "charset": "UTF-8" },
        { "http-equiv": "X-UA-Compatible", "content": "IE=edge" },
        {
          "name": "viewport",
          "content": "width=device-width, initial-scale=1.0"
        }
      ],
      "link": [
       
        { "rel": "stylesheet", "href": "/style.css" } 
      ],
      "script": []
    },
    "router": {
      "useHashRouting": false
    }
  }
}

elm-tooling.json

{
  "entrypoints": ["./.elm-land/src/Main.elm"],
  "tools": {
    "elm": "0.19.1",
    "elm-format": "0.8.7",
    "elm-json": "0.2.13",
    "elm-test-rs": "3.0.0"
  }
}

Helpers.elm

module Helpers exposing (..)

{-| Helper for tailwind autocomplition

    Html.Attributes.class <| tailwind { css = "bg-red-100..." }

-}


tailwind : { css : String } -> String
tailwind classes =
    classes.css

package.json.gotmp

{
  "name": "{ .PackageName }",
  "version": "0.1.0",
  "main": "index.js",
  "author": "{ .CreatorName }",
  "license": "MIT",
  "private": true,
  "scripts": {
    "postinstall": "elm-tooling install",
    "dev": "elm-land server",
    "build": "elm-land build"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/line-clamp": "^0.4.2",
    "elm-land": "^0.18.1",
    "elm-tooling": "^1.14.0",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.1.13",
    "tailwindcss": "^3.3.2"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,elm,ts,css,tsx,jsx,vue}"],
  theme: {
    extend: {
      container: {
        center: true,
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};