Add tailwindcss

package-lock.json

@@ -2510,6 +2510,21 @@
             "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
             "dev": true
         },
+        "autoprefixer": {
+            "version": "9.7.4",
+            "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz",
+            "integrity": "sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==",
+            "dev": true,
+            "requires": {
+                "browserslist": "^4.8.3",
+                "caniuse-lite": "^1.0.30001020",
+                "chalk": "^2.4.2",
+                "normalize-range": "^0.1.2",
+                "num2fraction": "^1.2.2",
+                "postcss": "^7.0.26",
+                "postcss-value-parser": "^4.0.2"
+            }
+        },
         "babel-loader": {
             "version": "8.0.6",
             "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
@@ -2916,6 +2931,30 @@
                 "unset-value": "^1.0.0"
             }
         },
+        "caller-callsite": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+            "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+            "dev": true,
+            "requires": {
+                "callsites": "^2.0.0"
+            }
+        },
+        "caller-path": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+            "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+            "dev": true,
+            "requires": {
+                "caller-callsite": "^2.0.0"
+            }
+        },
+        "callsites": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+            "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+            "dev": true
+        },
         "camel-case": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
@@ -2932,6 +2971,12 @@
             "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
             "dev": true
         },
+        "camelcase-css": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+            "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+            "dev": true
+        },
         "caniuse-lite": {
             "version": "1.0.30001021",
             "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001021.tgz",
@@ -3429,6 +3474,18 @@
             "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
             "dev": true
         },
+        "cosmiconfig": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+            "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+            "dev": true,
+            "requires": {
+                "import-fresh": "^2.0.0",
+                "is-directory": "^0.3.1",
+                "js-yaml": "^3.13.1",
+                "parse-json": "^4.0.0"
+            }
+        },
         "cpx2": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/cpx2/-/cpx2-2.0.0.tgz",
@@ -3568,6 +3625,12 @@
                 "source-map": "^0.5.3"
             }
         },
+        "css-unit-converter": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
+            "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
+            "dev": true
+        },
         "css-what": {
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -4019,6 +4082,15 @@
                 "prr": "~1.0.1"
             }
         },
+        "error-ex": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+            "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+            "dev": true,
+            "requires": {
+                "is-arrayish": "^0.2.1"
+            }
+        },
         "es-abstract": {
             "version": "1.16.3",
             "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.16.3.tgz",
@@ -6063,6 +6135,34 @@
             "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
             "dev": true
         },
+        "import-cwd": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+            "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+            "dev": true,
+            "requires": {
+                "import-from": "^2.1.0"
+            }
+        },
+        "import-fresh": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+            "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+            "dev": true,
+            "requires": {
+                "caller-path": "^2.0.0",
+                "resolve-from": "^3.0.0"
+            }
+        },
+        "import-from": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+            "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+            "dev": true,
+            "requires": {
+                "resolve-from": "^3.0.0"
+            }
+        },
         "import-local": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
@@ -6194,6 +6294,12 @@
             "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
             "dev": true
         },
+        "is-arrayish": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+            "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+            "dev": true
+        },
         "is-binary-path": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
@@ -6260,6 +6366,12 @@
                 }
             }
         },
+        "is-directory": {
+            "version": "0.3.1",
+            "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+            "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
+            "dev": true
+        },
         "is-extendable": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -6532,6 +6644,12 @@
             "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
             "dev": true
         },
+        "lodash.toarray": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+            "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+            "dev": true
+        },
         "loglevel": {
             "version": "1.6.6",
             "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.6.tgz",
@@ -6967,6 +7085,15 @@
                 "lower-case": "^1.1.1"
             }
         },
+        "node-emoji": {
+            "version": "1.10.0",
+            "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+            "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+            "dev": true,
+            "requires": {
+                "lodash.toarray": "^4.4.0"
+            }
+        },
         "node-fetch": {
             "version": "1.7.3",
             "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
@@ -7077,6 +7204,12 @@
             "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
             "dev": true
         },
+        "normalize-range": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+            "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+            "dev": true
+        },
         "normalize-url": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
@@ -7089,6 +7222,12 @@
                 "sort-keys": "^1.0.0"
             }
         },
+        "normalize.css": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+            "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+            "dev": true
+        },
         "npm-run-path": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -7107,6 +7246,12 @@
                 "boolbase": "~1.0.0"
             }
         },
+        "num2fraction": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+            "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+            "dev": true
+        },
         "number-is-nan": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -7423,6 +7568,16 @@
                 "safe-buffer": "^5.1.1"
             }
         },
+        "parse-json": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+            "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+            "dev": true,
+            "requires": {
+                "error-ex": "^1.3.1",
+                "json-parse-better-errors": "^1.0.1"
+            }
+        },
         "parse-passwd": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@@ -7611,6 +7766,88 @@
                 }
             }
         },
+        "postcss-functions": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+            "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+            "dev": true,
+            "requires": {
+                "glob": "^7.1.2",
+                "object-assign": "^4.1.1",
+                "postcss": "^6.0.9",
+                "postcss-value-parser": "^3.3.0"
+            },
+            "dependencies": {
+                "postcss": {
+                    "version": "6.0.23",
+                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+                    "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+                    "dev": true,
+                    "requires": {
+                        "chalk": "^2.4.1",
+                        "source-map": "^0.6.1",
+                        "supports-color": "^5.4.0"
+                    }
+                },
+                "postcss-value-parser": {
+                    "version": "3.3.1",
+                    "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+                    "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+                    "dev": true
+                },
+                "source-map": {
+                    "version": "0.6.1",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+                    "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+                    "dev": true
+                }
+            }
+        },
+        "postcss-js": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+            "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+            "dev": true,
+            "requires": {
+                "camelcase-css": "^2.0.1",
+                "postcss": "^7.0.18"
+            }
+        },
+        "postcss-load-config": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
+            "integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
+            "dev": true,
+            "requires": {
+                "cosmiconfig": "^5.0.0",
+                "import-cwd": "^2.0.0"
+            }
+        },
+        "postcss-loader": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
+            "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
+            "dev": true,
+            "requires": {
+                "loader-utils": "^1.1.0",
+                "postcss": "^7.0.0",
+                "postcss-load-config": "^2.0.0",
+                "schema-utils": "^1.0.0"
+            },
+            "dependencies": {
+                "schema-utils": {
+                    "version": "1.0.0",
+                    "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+                    "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+                    "dev": true,
+                    "requires": {
+                        "ajv": "^6.1.0",
+                        "ajv-errors": "^1.0.0",
+                        "ajv-keywords": "^3.1.0"
+                    }
+                }
+            }
+        },
         "postcss-modules-extract-imports": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz",
@@ -7652,6 +7889,16 @@
                 "postcss": "^7.0.6"
             }
         },
+        "postcss-nested": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.1.tgz",
+            "integrity": "sha512-AMayXX8tS0HCp4O4lolp4ygj9wBn32DJWXvG6gCv+ZvJrEa00GUxJcJEEzMh87BIe6FrWdYkpR2cuyqHKrxmXw==",
+            "dev": true,
+            "requires": {
+                "postcss": "^7.0.21",
+                "postcss-selector-parser": "^6.0.2"
+            }
+        },
         "postcss-selector-parser": {
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
@@ -7685,6 +7932,12 @@
                 "utila": "~0.4"
             }
         },
+        "pretty-hrtime": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+            "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+            "dev": true
+        },
         "private": {
             "version": "0.1.8",
             "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -8160,6 +8413,24 @@
                 }
             }
         },
+        "reduce-css-calc": {
+            "version": "2.1.7",
+            "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz",
+            "integrity": "sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==",
+            "dev": true,
+            "requires": {
+                "css-unit-converter": "^1.1.1",
+                "postcss-value-parser": "^3.3.0"
+            },
+            "dependencies": {
+                "postcss-value-parser": {
+                    "version": "3.3.1",
+                    "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+                    "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+                    "dev": true
+                }
+            }
+        },
         "regenerate": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -9247,6 +9518,28 @@
                 "has-flag": "^3.0.0"
             }
         },
+        "tailwindcss": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.1.4.tgz",
+            "integrity": "sha512-p4AxVa4CKpX7IbNxImwNMGG9MHuLgratOaOE/iGriNd4AsRQRM2xMisoQ3KQHqShunrWuObga7rI7xbNsVoWGA==",
+            "dev": true,
+            "requires": {
+                "autoprefixer": "^9.4.5",
+                "bytes": "^3.0.0",
+                "chalk": "^2.4.1",
+                "fs-extra": "^8.0.0",
+                "lodash": "^4.17.11",
+                "node-emoji": "^1.8.1",
+                "normalize.css": "^8.0.1",
+                "postcss": "^7.0.11",
+                "postcss-functions": "^3.0.0",
+                "postcss-js": "^2.0.0",
+                "postcss-nested": "^4.1.1",
+                "postcss-selector-parser": "^6.0.0",
+                "pretty-hrtime": "^1.0.3",
+                "reduce-css-calc": "^2.1.6"
+            }
+        },
         "tapable": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",

package.json

@@ -33,10 +33,12 @@
         "css-loader": "^3.4.2",
         "html-webpack-plugin": "^3.2.0",
         "mini-css-extract-plugin": "^0.9.0",
+        "postcss-loader": "^3.0.0",
         "react-snap": "^1.23.0",
         "rimraf": "^3.0.0",
         "source-map-loader": "^0.2.4",
         "style-loader": "^1.1.3",
+        "tailwindcss": "^1.1.4",
         "ts-loader": "^6.2.1",
         "tslint": "^5.20.1",
         "tslint-react": "^4.1.0",

vendors/tailwind@1.1.4/tailwind.css

@@ -0,0 +1 @@
+@tailwind utilities;

webpack.config.js

@@ -14,7 +14,8 @@ const plugins = [
         filename: './index.html',
     }),
     new MiniCssExtractPlugin({
-        filename: '[name].[contenthash].css',
+        // filename: '[name].[contenthash].css',
+        filename: '[name].css',
         ignoreOrder: false, // Enable to remove warnings about conflicting order
     }),
 ];
@@ -28,13 +29,15 @@ module.exports = {
         'vendor-styles': [
             './vendors/normalize.css@8.0.1/normalize.css',
             './vendors/highlight.js@9.12.0/theme.min.css',
+            './vendors/tailwind@1.1.4/tailwind.css',
         ],
         // The CSS for client should come after `vendor-styles`
         client: './client/index.tsx',
     },
     output: {
         path: path.join(__dirname, 'dist'),
-        filename: '[name].[contenthash].js',
+        // filename: '[name].[contenthash].js',
+        filename: '[name].js',
         // It's very important
         // All the chunk generated by webpack then will be loaded such as
         // <script charset="utf-8" src="/[chunk-name].bundle.js"></script>
@@ -53,6 +56,15 @@ module.exports = {
                         },
                     },
                     'css-loader',
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            ident: 'postcss',
+                            plugins: [
+                                require('tailwindcss'),
+                            ],
+                        },
+                    },
                 ],
             },
             {