Update to Tailwind 3; support normal tailwind usage without twin.macro

package.json

@@ -4,7 +4,7 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.11",
-        "@tailwindcss/forms": "^0.2.1",
+        "@tailwindcss/forms": "^0.5.2",
         "axios": "^0.21.1",
         "chart.js": "^2.8.0",
         "codemirror": "^5.57.0",
@@ -34,7 +34,7 @@
         "styled-components": "^5.2.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "swr": "^0.2.3",
-        "tailwindcss": "^2.0.2",
+        "tailwindcss": "^3.0.24",
         "uuid": "^3.3.2",
         "xterm": "^4.15.0",
         "xterm-addon-attach": "^0.6.0",
@@ -78,11 +78,11 @@
         "@types/yup": "^0.29.3",
         "@typescript-eslint/eslint-plugin": "^4.25.0",
         "@typescript-eslint/parser": "^4.25.0",
-        "autoprefixer": "^10.1.0",
-        "babel-loader": "^8.0.6",
-        "babel-plugin-styled-components": "^1.12.0",
+        "autoprefixer": "^10.4.7",
+        "babel-loader": "^8.2.5",
+        "babel-plugin-styled-components": "^2.0.7",
         "cross-env": "^7.0.2",
-        "css-loader": "^3.2.1",
+        "css-loader": "^5.2.7",
         "eslint": "^7.27.0",
         "eslint-config-standard": "^16.0.3",
         "eslint-plugin-import": "^2.23.3",
@@ -91,14 +91,18 @@
         "eslint-plugin-react": "^7.23.2",
         "eslint-plugin-react-hooks": "^4.2.0",
         "fork-ts-checker-webpack-plugin": "^6.2.10",
-        "postcss": "^8.2.1",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
+        "postcss-loader": "^4.0.0",
+        "postcss-nesting": "^10.1.8",
+        "postcss-preset-env": "^7.7.1",
         "redux-devtools-extension": "^2.13.8",
-        "source-map-loader": "^1.0.1",
-        "style-loader": "^1.2.1",
-        "svg-url-loader": "^6.0.0",
-        "terser-webpack-plugin": "^3.0.6",
+        "source-map-loader": "^1.1.3",
+        "style-loader": "^2.0.0",
+        "svg-url-loader": "^7.1.1",
+        "terser-webpack-plugin": "^4.2.3",
         "ts-essentials": "^9.1.2",
-        "twin.macro": "^2.0.7",
+        "twin.macro": "^2.8.2",
         "typescript": "^4.2.4",
         "webpack": "^4.43.0",
         "webpack-assets-manifest": "^3.1.1",
@@ -120,5 +124,15 @@
         "last 2 versions",
         "firefox esr",
         "not dead"
-    ]
+    ],
+    "babelMacros": {
+        "twin": {
+            "preset": "styled-components"
+        },
+        "styledComponents": {
+            "pure": true,
+            "displayName": true,
+            "fileName": true
+        }
+    }
 }