Merge pull request #470 from jamstack/zl/469

Upgrades major versions of TailwindCSS and PostCSS

Author: Phil Hawksworth

package.json

@@ -8,6 +8,9 @@
     "type": "git",
     "url": "https://github.com/jamstack/jamstack.org"
   },
+  "engines": {
+    "node": ">=12"
+  },
   "scripts": {
     "build": "npm-run-all build:html build:css",
     "build:html": "eleventy",
@@ -21,22 +24,22 @@
   "dependencies": {
     "@11ty/eleventy": "^0.11.1",
     "@11ty/eleventy-cache-assets": "^2.0.3",
-    "@fullhuman/postcss-purgecss": "^1.3.0",
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "^10.0.4",
     "cssnano": "^4.1.10",
     "dotenv": "^8.2.0",
     "fast-glob": "^3.2.4",
     "gray-matter": "^4.0.2",
     "js-yaml": "^3.14.0",
     "lodash": "^4.17.20",
     "luxon": "^1.25.0",
-    "markdown-it": "^11.0.1",
-    "netlify-plugin-minify-html": "^0.2.2",
+    "markdown-it": "^12.0.2",
+    "netlify-plugin-minify-html": "^0.3.0",
     "node-fetch": "^2.6.1",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^6.1.3",
-    "postcss-import": "^12.0.1",
-    "tailwindcss": "^1.8.10"
+    "postcss": "^8.1.10",
+    "postcss-cli": "^8.3.0",
+    "postcss-import": "^13.0.0",
+    "tailwindcss": "^2.0.1"
   },
   "devDependencies": {
     "live-server": "^1.2.1"

postcss.config.js

@@ -1,22 +1,7 @@
-// const purgecss = require('@fullhuman/postcss-purgecss')({
-
-//   // Specify the paths to all of the template files in the project
-//   content: [
-//     './src/site/**/*.njk',
-//     './src/site/**/*.md'
-//   ],
-
-//   // Include any special characters
-//   defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
-// })
-
-
-
 module.exports = {
   plugins: [
+    require("postcss-import"),
     require('tailwindcss'),
     require('autoprefixer'),
-    require("postcss-import"),
-    // ...process.env.NODE_ENV === 'production' ? [purgecss,  require('cssnano')] : []
   ]
 };

src/css/tailwind.css

@@ -88,7 +88,7 @@ a.cta:focus {
 footer p a {
   @apply border-b;
   @apply border-blue-100;
-  @apply whitespace-no-wrap;
+  @apply whitespace-nowrap;
 }
 footer p a:hover,
 footer p a:focus {
@@ -134,16 +134,16 @@ footer p a:focus {
 }
 
 .bg-gradient-card-sunrise {
-  --gradient-color-stops: #F0047F 0%, #FC814A 100%;
+  --tw-gradient-stops: #F0047F 0%, #FC814A 100%;
 }
 .bg-gradient-card-blue {
-  --gradient-color-stops: #04A2DD 0%, #4FF3EA 100%;
+  --tw-gradient-stops: #04A2DD 0%, #4FF3EA 100%;
 }
 .bg-gradient-card-seafoam {
-  --gradient-color-stops: #88F9ED 0%, #00FFB2 100%;
+  --tw-gradient-stops: #88F9ED 0%, #00FFB2 100%;
 }
 .bg-gradient-card-gold {
-  --gradient-color-stops: #FFC803 0%, #FC814A 100%;
+  --tw-gradient-stops: #FFC803 0%, #FC814A 100%;
 }
 .bg-gradient-card-blue-seafoam.bg-gradient-card-blue-seafoam {
   background: linear-gradient(101.87deg, #0090CA 0%, #00BFAD 105.55%), linear-gradient(180deg, #009DDC 0%, #58FCEC 100%);