build(css): use tailwind jit

ecklf · Sep 16, 2021 · ba16c31 · ba16c31
1 parent 7f6aa20
commit ba16c31
Show file tree

Hide file tree

Showing 4 changed files with 763 additions and 734 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   "author": "impulse",
   "license": "MIT",
   "dependencies": {
-    "autoprefixer": "^10.2.1",
+    "autoprefixer": "^10.3.4",
     "classnames": "^2.2.6",
     "css-loader": "^3.6.0",
     "html-webpack-inline-source-plugin": "0.0.10",
@@ -30,23 +30,23 @@
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.2.4",
     "style-loader": "^1.2.1",
-    "tailwindcss": "^2.0.2",
+    "tailwindcss": "^2.2.15",
     "ts-loader": "^7.0.5",
     "typescript": "^3.9.6",
     "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "3.1.3",
-    "@tailwindcss/forms": "^0.2.1",
-    "@types/jest": "26.0.3",
+    "@fullhuman/postcss-purgecss": "4.0.3",
+    "@tailwindcss/forms": "^0.3.3",
+    "@types/jest": "27.0.1",
     "@types/node": "14.0.14",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "cssnano": "^4.1.10",
+    "cssnano": "^5.0.8",
     "jest": "26.1.0",
-    "postcss": "^8.2.3",
+    "postcss": "^8.3.6",
     "ts-jest": "26.1.1",
     "webpack-dev-server": "3.11.0"
   }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,8 @@
 const colors = require("tailwindcss/colors");
 
 module.exports = {
-  purge: false,
+  mode: "jit",
+  purge: ["./src/**/*.{js,ts,tsx,html}"],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {

diff --git a/webpack.config.js b/webpack.config.js
@@ -30,33 +30,6 @@ module.exports = (env, argv) => ({
               postcssOptions: {
                 plugins: [
                   require("tailwindcss")("./tailwind.config.js"),
-                  ...(argv.mode === "production"
-                    ? [
-                        require("@fullhuman/postcss-purgecss")({
-                          whitelist: ["link"],
-                          content: ["**/*.html", "**/*.tsx"],
-                          css: ["**/*.css"],
-                          defaultExtractor: (content) => {
-                            // Capture as liberally as possible, including things like `h-(screen-1.5)`
-                            const broadMatches =
-                              content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
-                            const broadMatchesWithoutTrailingSlash = broadMatches.map(
-                              (match) => trimEnd(match, "\\")
-                            );
-
-                            // Capture classes within other delimiters like .block(class="w-1/2") in Pug
-                            const innerMatches =
-                              content.match(
-                                /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g
-                              ) || [];
-
-                            return broadMatches
-                              .concat(broadMatchesWithoutTrailingSlash)
-                              .concat(innerMatches);
-                          },
-                        }),
-                      ]
-                    : []),
                   require("autoprefixer"),
                   require("cssnano"),
                 ],