TailwindCSS upgrade (#58)

* TailwindCSS upgrade
- removed purgeCSS as it is now included
- removed autoprefixer in favor of postcss-preset-env
- fixed a postCSS error (postcss/postcss#1420 (comment))
- renamed whitespace-no-wrap to whitespace-nowrap (tailwindCSS v2.0 change)

* tailwind color and mediaquery tweaking

package.json

@@ -42,10 +42,9 @@
   },
   "homepage": "https://github.com/JanDW/wildpeaches#readme",
   "devDependencies": {
+    "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.4",
-    "@fullhuman/postcss-purgecss": "^3.0.0",
     "@iktakahiro/markdown-it-katex": "^4.0.1",
-    "autoprefixer": "^10.0.4",
     "clean-css-cli": "^4.3.0",
     "csscomb": "^4.3.0",
     "cssnano": "^4.1.10",
@@ -59,15 +58,14 @@
     "markdown-it-image-lazy-loading": "^1.0.2",
     "markdownlint-cli": "^0.25.0",
     "moment": "^2.29.1",
+    "postcss": "^8.1.14",
     "postcss-cli": "^8.3.0",
     "postcss-custom-selectors": "^5.1.2",
     "postcss-easy-import": "^3.0.0",
     "postcss-extend-rule": "^3.0.0",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "2.2.1",
-    "purgecss": "^3.0.0"
-  },
-  "dependencies": {
-    "@11ty/eleventy": "^0.11.1",
     "tailwindcss": "^2.0.1"
-  }
+  },
+  "dependencies": {}
 }

postcss.config.js

@@ -1,7 +1,5 @@
 /* https://flaviocopes.com/tailwind-setup/ */
 
-const purgecss = require('@fullhuman/postcss-purgecss');
-
 const cssnano = require('cssnano');
 
 module.exports = {
@@ -10,15 +8,9 @@ module.exports = {
     require('postcss-extend-rule'),
     require('postcss-custom-selectors'),
     require('tailwindcss'),
-    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
+    process.env.NODE_ENV === 'production' ? require('postcss-preset-env')({ stage: 1 }) : null,
     process.env.NODE_ENV === 'production'
       ? cssnano({ preset: 'default' })
-      : null,
-    process.env.NODE_ENV === 'production'
-      ? purgecss({
-          content: ['./www/**/*.html'],
-          defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
-        })
-      : null,
+      : null
   ],
 };

src/_content/docs/2020-08-06-hello-world.md

@@ -88,38 +88,38 @@ HTML does just fine embedded in markdown. Here's a table. It's not very useful.
   </thead>
   <tbody class="divide-y divide-gray-300">
     <tr>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
         Answer
       </td>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
         <div class="text-sm leading-5 text-gray-900">Amazingly Accurate Answer to Life,</div>
         <div class="text-sm leading-5 text-gray-500">the Universe and Everything</div>
       </td>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-right">
         42
       </td> 
     </tr>
     <tr>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
         Answer
       </td>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
         <div class="text-sm leading-5 text-gray-900">Amazingly Accurate Answer to Life,</div>
         <div class="text-sm leading-5 text-gray-500">the Universe and Everything</div>
       </td>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-right">
         42
       </td> 
     </tr>
     <tr>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-300">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-300">
         Answer
       </td>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200">
         <div class="text-sm leading-5 text-gray-900">Amazingly Accurate Answer to Life,</div>
         <div class="text-sm leading-5 text-gray-500">the Universe and Everything</div>
       </td>
-      <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-right">
+      <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-right">
         42
       </td> 
     </tr>