Update TW, form plugin and postcss; update nvmrc to 20; remove @tailwind

 variants from index.css

.nvmrc

@@ -1 +1 @@
-18
+20

package.json

@@ -30,8 +30,8 @@
   },
   "dependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "tailwindcss": "^3.3.5"
+    "@tailwindcss/forms": "^0.5.7",
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "auto-changelog": "^2.2.1",
@@ -42,7 +42,7 @@
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-prettier": "^3.4.0",
     "light-server": "^2.9.1",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.33",
     "postcss-import": "^13.0.0",
     "postcss-loader": "^4.0.0",
     "postcss-nested": "^5.0.1",

src/css/index.css

@@ -28,11 +28,3 @@
  */
 @tailwind utilities;
 
-/**
- * Use this directive to control where Tailwind injects the responsive
- * variations of each utility.
- *
- * If omitted, Tailwind will append these classes to the very end of
- * your stylesheet by default.
- */
-@tailwind variants;

src/plugins/theme/borderWidth.js

@@ -1,5 +1,6 @@
 /**
  * Note: these are in px not rem units
+ * 1, 2, 4 and 8px are already provided by Tailwind out of the box
  */
 module.exports = function () {
   return {

tailwind.config.js

@@ -57,6 +57,11 @@ module.exports = {
         ':merge(.group):focus-within &',
         ':merge(.group):hover &',
       ]);
+      /**
+       * Note: in TW v3.4.0, the *: variant is added for targeting direct children
+       * https://github.com/tailwindlabs/tailwindcss/pull/12551
+       * Leaving these in for now for backwards compatibility.
+       */
       addVariant('children', '& > *');
       addVariant('children-hover', '& > *:hover');
       addVariant('children-focus', '& > *:focus');