chore(deps): update dependency tailwindcss to v4 (#4002)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Stephan Köninger <[email protected]>

Author: renovate[bot]

spring-boot-admin-server-ui/.storybook/main.js

@@ -1,4 +1,6 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx').default;
 const { mergeConfig } = require('vite');
+
 const path = require('path');
 const frontend = path.resolve(__dirname, '../src/main/frontend/');
 module.exports = {
@@ -18,6 +20,7 @@ module.exports = {
   },
   async viteFinal(config) {
     config.plugins = config.plugins.filter((p) => p.name !== 'vue-docgen');
+    config.plugins.push(vueJsx());
     return mergeConfig(config, {
       resolve: {
         alias: {

spring-boot-admin-server-ui/package-lock.json

@@ -74,6 +74,8 @@
     "@storybook/addon-mdx-gfm": "^8.0.0",
     "@storybook/vue3": "8.5.8",
     "@storybook/vue3-vite": "^8.0.0",
+    "@tailwindcss/postcss": "^4.0.7",
+    "@tailwindcss/vite": "^4.0.7",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/user-event": "14.6.1",
     "@testing-library/vue": "8.1.0",
@@ -83,6 +85,7 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-vue": "5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-typescript": "^14.0.0",
     "@vue/test-utils": "2.4.6",
     "autoprefixer": "10.4.20",
@@ -92,16 +95,16 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-storybook": "0.11.3",
     "eslint-plugin-vue": "^9.10.0",
-    "happy-dom": "^14.12.3",
+    "happy-dom": "^17.1.1",
     "jsdom": "^26.0.0",
     "msw": "2.7.1",
     "msw-storybook-addon": "2.0.4",
-    "postcss": "8.5.3",
     "prettier": "^3.0.3",
     "rollup-plugin-visualizer": "5.14.0",
     "sass": "^1.57.1",
     "storybook": "8.5.8",
-    "tailwindcss": "3.4.17",
+    "storybook-vue3-router": "^5.0.0",
+    "tailwindcss": "4.0.7",
     "ts-node-dev": "^2.0.0",
     "typescript": "^5.0.3",
     "vite": "6.1.1",
@@ -116,8 +119,7 @@
     "not ie <= 8"
   ],
   "engines": {
-    "node": "22.14.0",
-    "npm": "11.1.0"
+    "node": "22.14.0"
   },
   "msw": {
     "workerDirectory": [
@@ -127,5 +129,6 @@
   },
   "overrides": {
     "esbuild": "0.25.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
 }

spring-boot-admin-server-ui/package.json

@@ -20,13 +20,7 @@ export default {
   title: 'Components/Alert',
 };
 
-const Template = (args) => ({
-  components: { SbaAlert },
-  setup() {
-    return { args };
-  },
-  template: '<sba-alert v-bind="args" />',
-});
+const Template = (args) => <sba-alert {...args} />;
 
 export const AlertError = {
   render: Template,

spring-boot-admin-server-ui/postcss.config.js

@@ -18,7 +18,7 @@
   <div
     v-if="hasError"
     :class="classNames(alertClass, borderClassNames)"
-    class="rounded-b px-4 py-3 shadow-sm backdrop-filter backdrop-blur-xs bg-opacity-80 my-3"
+    class="rounded-b px-4 py-3 shadow backdrop-filter backdrop-blur-xs my-3"
     role="alert"
   >
     <div class="flex">
@@ -70,13 +70,13 @@ export default defineComponent({
     return {
       classNames,
       alertClass: {
-        'bg-red-100 border-red-400 text-red-700':
+        'bg-red-100/80 border-red-400 text-red-700':
           this.severity.toUpperCase() === Severity.ERROR,
-        'bg-orange-100 border-orange-500 text-orange-700':
+        'bg-orange-100/80 border-orange-500 text-orange-700':
           this.severity.toUpperCase() === Severity.WARN,
-        'bg-blue-100 border-blue-500 text-blue-900':
+        'bg-blue-100/80 border-blue-500 text-blue-900':
           this.severity.toUpperCase() === Severity.INFO,
-        'bg-teal-100 border-teal-500 text-teal-900':
+        'bg-teal-100/80 border-teal-500 text-teal-900':
           this.severity.toUpperCase() === Severity.SUCCESS,
       },
       textColor: {

spring-boot-admin-server-ui/src/main/frontend/components/sba-alert.stories.ts renamed to spring-boot-admin-server-ui/src/main/frontend/components/sba-alert.stories.tsx

@@ -4,7 +4,9 @@
   </div>
 </template>
 
-<style type="text/css">
+<style>
+@reference "@/index.css";
+
 .btn-group {
   @apply inline-flex z-0 relative -space-x-px;
 }
@@ -15,14 +17,14 @@
 }
 
 .btn-group button:first-child:not(:last-child) {
-  @apply rounded-r-none !important;
+  @apply rounded-r-none!;
 }
 
 .btn-group button:not(:first-child):not(:last-child) {
-  @apply rounded-none !important;
+  @apply rounded-none!;
 }
 
 .btn-group button:last-child:not(:first-child) {
-  @apply rounded-l-none !important;
+  @apply rounded-l-none!;
 }
 </style>

spring-boot-admin-server-ui/src/main/frontend/components/sba-alert.vue

@@ -64,18 +64,3 @@ export const SuccessButton = {
     class: 'is-success',
   },
 };
-
-const SizeTemplate = () => {
-  return {
-    components: { SbaButton },
-    template: `
-      <sba-button size="xs">button xs</sba-button>
-      <sba-button size="sm">button sm</sba-button>
-      <sba-button size="base">button base</sba-button>
-    `,
-  };
-};
-
-export const ButtonSizes = {
-  render: SizeTemplate,
-};

spring-boot-admin-server-ui/src/main/frontend/components/sba-button-group.vue

@@ -51,6 +51,8 @@ export default {
 </script>
 
 <style scoped>
+@reference "@/index.css";
+
 .btn {
   @apply rounded-l rounded-r font-medium text-sm text-center text-black border-gray-300 border border-gray-300 bg-white;
   @apply focus:ring-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500;
@@ -100,10 +102,4 @@ export default {
 .btn.is-primary {
   @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-300;
 }
-
-@supports (-moz-appearance: none) {
-  .backdrop-filter.bg-opacity-40 {
-    --tw-bg-opacity: 1 !important;
-  }
-}
 </style>

spring-boot-admin-server-ui/src/main/frontend/components/sba-button.stories.ts

@@ -21,16 +21,10 @@ export default {
 };
 
 const Template = (args) => {
-  return {
-    components: { SbaCheckbox },
-    setup() {
-      return { args };
-    },
-    template: '<sba-checkbox v-bind="args" />{{args}}',
-  };
+  return <sba-checkbox {...args} />;
 };
 
-export const OneButton = {
+export const WithLabel = {
   render: Template,
 
   args: {