Update tailwind, switch to tailwindcss/nesting, move postcss-css-vari…

…ables

Fixes #1416
Fixes #1074

As noted in #1416 there's been a change in `tailwindcss` around the
`@apply` directive. In order to get it to work correctly for nested
classes we need to use the `tailswindcss/nesting` plugin. We were already
using `postcss-nested`, which is what `tailwindcss/nesting` uses under
the hood. So this PR just switches them out.

It also moves the `postcss-css-variables` plugin to be higher in the
plugin stack for the mailer stylesheet. [That plugin doesn't play nicely
when it's below the nesting plugin.](MadLittleMods/postcss-css-variables#135 (comment))

Moving `postcss-css-variables` higher in the stack also seems to have
fixed the problems described in #1074. When it's higher in the stack I
see almost zero difference in build times between having it activated or
not, and the resulting stylesheet is actually _smaller_ when it is
activated (~120k vs ~140k).

package.json

@@ -30,7 +30,7 @@
     "postcss-nested": "^6.0.1",
     "stimulus-reveal": "^1.4.2",
     "stimulus-scroll-reveal": "^3.2.0",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.3",
     "yalc": "^1.0.0-pre.53"
   },
   "scripts": {

postcss.config.js

@@ -7,7 +7,7 @@ module.exports = {
   plugins: [
     require('postcss-import')(postcssImportConfig),
     require('postcss-extend-rule'),
-    require('postcss-nested'),
+    require('tailwindcss/nesting'),
     require('tailwindcss'),
     require('autoprefixer'),
   ]

postcss.mailer.config.js

@@ -7,9 +7,9 @@ module.exports = {
   plugins: [
     require('postcss-import')(postcssImportConfig),
     require('postcss-extend-rule'),
-    require('postcss-nested'),
-    require('tailwindcss'),
     require('postcss-css-variables'),
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
     require('autoprefixer'),
   ]
 }