Introduce TailwindCSS CLI with JIT-Mode

Remove Tailwind Compatibility Mode and PostCSS. Install newest tailwind and configure it to use JIT-Mode. Setup npm run scripts to run TailwindCSS CLI and Parcel in parallel. The Tailwind index.css and all .html/.ts files are scanned live and generated to /css/index-tailwind-output which is in turn included in index.html.

index.css

@@ -1,17 +1,18 @@
+/*
+    TailwindCSS JIT-Mode Input file.
+    Use TailwindCSS functions and directives here – https://tailwindcss.com/docs/functions-and-directives
+    About JIT-Mode: https://tailwindcss.com/docs/just-in-time-mode#styles-rebuild-in-an-infinite-loop
+
+    TailwindCSS CLI generates the css/index-tailwind-output.css file based on this file.
+    It is not used directly in the app.
+*/
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer utilities {
     @variants responsive {
-        .max-h-65vh {
-            max-height: 65vh;
-        }
-
-        .max-h-20vh {
-            max-height: 20vh;
-        }
-
         .z-above-map {
             z-index: 10000
         }
@@ -19,7 +20,6 @@
         .z-above-controls {
             z-index: 10001
         }
-
     }
 
     .btn {
@@ -381,4 +381,4 @@ li::marker {
 .slideshow-item img {
     height: var(--image-carousel-height);
     width: unset;
-}
+}

index.html

@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
     <link href="./vendor/leaflet.css" rel="stylesheet"/>
-    <link href="./index.css" rel="stylesheet"/>
     <link href="./css/userbadge.css" rel="stylesheet"/>
     <link href="./css/tabbedComponent.css" rel="stylesheet"/>
     <link href="./css/mobile.css" rel="stylesheet"/>
@@ -14,6 +13,7 @@
     <link href="css/ReviewElement.css" rel="stylesheet"/>
     <link href="vendor/MarkerCluster.css" rel="stylesheet"/>
     <link href="vendor/MarkerCluster.Default.css" rel="stylesheet"/>
+    <link href="./css/index-tailwind-output.css" rel="stylesheet" />
     <meta content="website" property="og:type">
 
     <!-- THEME-SPECIFIC -->

package.json

@@ -8,7 +8,10 @@
   "main": "index.js",
   "scripts": {
     "increase-memory": "export NODE_OPTIONS=--max_old_space_size=4096",
-    "start": "ts-node scripts/generateLayerOverview.ts --no-fail && npm run increase-memory && parcel *.html UI/** Logic/** assets/*.json assets/svg/* assets/generated/* assets/layers/*/*.svg assets/tagRenderings/*.json assets/themes/*/*.svg assets/themes/*/*.png vendor/* vendor/*/*",
+    "start": "npm run start:prepare && npm-run-all --parallel start:parallel:*",
+    "start:prepare": "ts-node scripts/generateLayerOverview.ts --no-fail && npm run increase-memory",
+    "start:parallel:parcel": "parcel *.html UI/** Logic/** assets/*.json assets/svg/* assets/generated/* assets/layers/*/*.svg assets/tagRenderings/*.json assets/themes/*/*.svg assets/themes/*/*.png vendor/* vendor/*/*",
+    "start:parallel:tailwindcli": "tailwindcss -i index.css -o css/index-tailwind-output.css --watch",
     "test": "ts-node test/TestAll.ts",
     "init": "npm ci && npm run generate && npm run generate:editor-layer-index && npm run generate:layouts && npm run clean",
     "add-weblate-upstream": "git remote add weblate-layers https://hosted.weblate.org/git/mapcomplete/layer-translations/ ; git remote update weblate-layers",
@@ -51,7 +54,6 @@
   "license": "GPL",
   "dependencies": {
     "@babel/preset-env": "7.13.8",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
     "@turf/buffer": "^6.3.0",
     "@turf/collect": "^6.3.0",
     "@turf/distance": "^6.3.0",
@@ -63,7 +65,6 @@
     "@types/leaflet.markercluster": "^1.4.3",
     "@types/lz-string": "^1.3.34",
     "@types/prompt-sync": "^4.1.0",
-    "autoprefixer": "^9.8.6",
     "country-language": "^0.1.7",
     "email-validator": "^2.0.4",
     "escape-html": "^1.0.3",
@@ -80,12 +81,13 @@
     "lz-string": "^1.4.4",
     "mangrove-reviews": "^0.1.3",
     "moment": "^2.29.0",
+    "npm-run-all": "^4.1.5",
     "opening_hours": "^3.6.0",
     "osm-auth": "^1.0.2",
     "osmtogeojson": "^3.0.0-beta.4",
     "parcel": "^1.2.4",
-    "postcss": "^7.0.36",
     "prompt-sync": "^4.2.0",
+    "tailwindcss": "^2.2.15",
     "tslint": "^6.1.3"
   },
   "devDependencies": {
@@ -96,7 +98,6 @@
     "marked": "^2.0.0",
     "read-file": "^0.2.0",
     "sharp": "^0.28.3",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
     "ts-node": "^9.0.0",
     "ts-node-dev": "^1.0.0-pre.63",
     "tslint-no-circular-imports": "^0.7.0",

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    }
-}

tailwind.config.js

@@ -1,9 +1,10 @@
 const plugin = require('tailwindcss/plugin')
 
 module.exports = {
+    mode: 'jit',
     purge: [
-        // './**/*.html',
-        // './**/*.js',
+        './**/*.html',
+        './**/*.ts',
     ],
     darkMode: false, // or 'media' or 'class'
     theme: {
@@ -20,9 +21,9 @@ module.exports = {
         }
     },
     plugins: [
-        plugin(function ({addVariant, e}) {
-            addVariant('landscape', ({modifySelectors, separator}) => {
-                modifySelectors(({className}) => {
+        plugin(function ({ addVariant, e }) {
+            addVariant('landscape', ({ modifySelectors, separator }) => {
+                modifySelectors(({ className }) => {
                     return `.${e(`landscape${separator}${className}`)}:landscape`
                 })
             })