Errors on Build when moving to 2.2.0

[CreateSean]

I have a working starter package that I wanted to bring up to 2.2.0 so that I could take advantage of the new features.

However when I do that I now get errors in when running npx run watch

× Mix
  Compiled with some errors in 778.48ms

ERROR in ./src/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'theme' of undefined
    at _default (D:\sites\craft-starter\node_modules\tailwindcss\lib\lib\substituteScreenAtRules.js:16:5)
odule.js:675:19)                                                             1
    at D:\sites\craft-starter\node_modules\webpack\lib\NormalModule.js:774:5 lazy-result.js:303:16)
    at D:\sites\craft-starter\node_modules\loader-runner\lib\LoaderRunner.js:azy-result.js:355:26)399:11                                                                       -result.js:205:30)
    at D:\sites\craft-starter\node_modules\loader-runner\lib\LoaderRunner.js:result.js:190:17)251:18                                                                       odule.js:675:19)
    at context.callback (D:\sites\craft-starter\node_modules\loader-runner\lib\LoaderRunner.js:124:13)                                                    399:11
    at Object.loader (D:\sites\craft-starter\node_modules\postcss-loader\dist251:18\index.js:96:7)

I've been unable to determine what is causing this error. However if I rollback to my previous working set up - everything runs correctly - that's using Tailwind 2.0.4

To update I deleted node_modules and then updated the package.json tailwind line to this: "tailwindcss": "^2.2.0", and then ran npm install

Please advise.

Package.json

{
  "name": "Craft-Starter",
  "version": "1.1.0",
  "description": "Craft Starter Website",
  "main": "webpack.mix.js",
  "author": "Sean Smith, Caffeine Creations <[email protected]>",
  "copyright": "",
  "license": "UNLICENSED",
  "private": true,
  "paths": {
    "src": {
      "base": "./src/",
      "css": "./src/css/",
      "fonts": "./src/fonts/",
      "img": "./src/img/",
      "json": "./src/json/",
      "js": "./src/js/",
      "scss": "./src/scss/"
    },
    "dist": {
      "base": "./public/",
      "assets": "./public/assets/",
      "css": "./public/assets/css/",
      "js": "./public/assets/js/",
      "fonts": "./public/assets/fonts/",
      "img": "./public/assets/img/"
    },
    "favicon": {
      "src": "./src/img/favicon.png",
      "dest": "./public/img/site/",
      "path": "/img/site/"
    },
    "tailwindcss": {
      "src": "./src/css/tailwind.css",
      "build": "./build/css/tailwind/",
      "conf": "./tailwind.js"
    },
    "scss": [],
    "craftConfig": "./config/",
    "templates": "./templates/"
  },
  "urls": {
    "live": "https://craft-starter.ddev.site/",
    "local": "https://craft-starter.ddev.site/",
    "critical": "https://domain.com/"
  },
  "vars": {
    "siteCssName": "site.combined.min.css",
    "scssName": "style.scss",
    "cssName": "style.css"
  },
  "globs": {
    "distCss": [
      "./build/css/tailwind/*.css",
      "./src/css/site.css"
    ],
    "img": [
      "./public/img/"
    ],
    "components": [],
    "distJs": [
      "./build/js/*.js"
    ],
    "babelJs": [
      "./src/js/*.js"
    ],
    "inlineJs": [],
    "siteIcon": "./public/img/site/favicon.*"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@tailwindcss/jit": "^0.1.9",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.2.2",
    "copy-webpack-plugin": "^5.0.2",
    "critical": "^3.0.0",
    "cssnano": "^4.1.10",
    "git-rev-sync": "^1.12.0",
    "glob-all": "^3.1.0",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "intersection-observer": "^0.5.1",
    "laravel-mix-banner": "^0.1.4",
    "laravel-mix-criticalcss": "^1.0.1",
    "laravel-mix-imagemin": "^1.0.3",
    "laravel-mix-tailwind": "^0.1.0",
    "lazysizes": "^2.0.6",
    "moment": "^2.24.0",
    "postcss": "^8.2.8",
    "postcss-easy-import": "^3.0.0",
    "postcss-font-magician": "^2.2.1",
    "postcss-hexrgba": "^1.0.2",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.6.0",
    "resolve-url-loader": "^3.0.1",
    "stylelint-config-recommended": "^2.2.0",
    "tailwindcss": "^2.2.0",
    "vue-template-compiler": "^2.6.12"
  },
  "dependencies": {
    "critical-css-webpack-plugin": "^2.0.0",
    "cross-env": "^6.0.3",
    "es6-promise": "^4.2.6",
    "hover.css": "^2.3.2",
    "instantsearch.js": "2.10.4",
    "laravel-mix": "^6.0.0"
  },
  "browserslist": [
    "> .5% or last 2 versions"
  ],
  "scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
  }
}

tailwind config

module.exports = {
  purge: [
    './templates/**/*.html',
    './templates/**/*.twig',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    container: {
      center: true,
    },
    extend: {
      fontFamily: {
        'default':['HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif'],
      },
      fontSize: {
      },
      colors: {
        grayBrand: {
          light: '#DADADA',
          DEFAULT: '#373F41',
        }
      },
    },
  },
  variants: {
    extend: {
      textColor: ['visited'],
    }
  },
}