enable tailwind nesting

package.json

@@ -86,6 +86,7 @@
     "jsdom": "24.0.0",
     "markdownlint-cli": "0.39.0",
     "postcss-html": "1.6.0",
+    "postcss-nesting": "12.1.0",
     "stylelint": "16.2.1",
     "stylelint-declaration-block-no-ignored-properties": "2.8.0",
     "stylelint-declaration-strict-value": "1.10.4",

webpack.config.js

@@ -13,6 +13,8 @@ import {readFileSync} from 'node:fs';
 import {env} from 'node:process';
 import tailwindcss from 'tailwindcss';
 import tailwindConfig from './tailwind.config.js';
+import tailwindcssNesting from 'tailwindcss/nesting/index.js';
+import postcssNesting from 'postcss-nesting';
 
 const {EsbuildPlugin} = EsBuildLoader;
 const {SourceMapDevToolPlugin, DefinePlugin} = webpack;
@@ -152,7 +154,10 @@ export default {
             options: {
               postcssOptions: {
                 map: false, // https://github.com/postcss/postcss/issues/1914
-                plugins: [tailwindcss(tailwindConfig)],
+                plugins: [
+                  tailwindcssNesting(postcssNesting({edition: '2024-02'})),
+                  tailwindcss(tailwindConfig)
+                ],
               },
             },
           }