enable tailwind nesting (#29746)

Currently, if you implement native CSS nesting within a Vue component a
warning will appear in the terminal. It states
`Nested CSS was detected, but CSS nesting has not been configured
correctly.
Please enable a CSS nesting plugin *before* Tailwind in your
configuration.` To fix this error we need to enable the built-in
[tailwinds nesting
config](https://tailwindcss.com/docs/using-with-preprocessors#nesting).

Example code to trigger the warning within a vue component:

```CSS
<style>
.example {
  &:hover,
  &:focus-visible {
    color: var(--color-text);
  }

  & svg {
    margin-right: 0.78rem;
  }
}
</style>
```

---------

Co-authored-by: rafh <[email protected]>
Co-authored-by: silverwind <[email protected]>

Author: 3 people

package-lock.json

@@ -42,6 +42,7 @@
     "pdfobject": "2.3.0",
     "postcss": "8.4.35",
     "postcss-loader": "8.1.1",
+    "postcss-nesting": "12.1.0",
     "pretty-ms": "9.0.0",
     "sortablejs": "1.15.2",
     "swagger-ui-dist": "5.11.8",

package.json

@@ -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;
@@ -145,14 +147,18 @@ export default {
               sourceMap: sourceMaps === 'true',
               url: {filter: filterCssImport},
               import: {filter: filterCssImport},
+              importLoaders: 1,
             },
           },
           {
             loader: 'postcss-loader',
             options: {
               postcssOptions: {
                 map: false, // https://github.com/postcss/postcss/issues/1914
-                plugins: [tailwindcss(tailwindConfig)],
+                plugins: [
+                  tailwindcssNesting(postcssNesting({edition: '2024-02'})),
+                  tailwindcss(tailwindConfig),
+                ],
               },
             },
           }