feat: initial commit for tailwind v4

unraid-ui/.storybook/main.ts

@@ -3,23 +3,25 @@ import type { StorybookConfig } from '@storybook/vue3-vite';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+
   framework: {
     name: '@storybook/vue3-vite',
     options: {
       docgen: 'vue-component-meta',
     },
   },
+
   core: {
     builder: '@storybook/builder-vite',
   },
-  docs: {
-    autodocs: 'tag',
-  },
+
   staticDirs: ['./static'],
+
   async viteFinal(config) {
     return {
       ...config,
+      plugins: [...(config.plugins ?? []), await import('@tailwindcss/vite').then((m) => m.default())],
       root: dirname(require.resolve('@storybook/builder-vite')),
       resolve: {
         alias: {
@@ -31,16 +33,6 @@ const config: StorybookConfig = {
       optimizeDeps: {
         include: [...(config.optimizeDeps?.include ?? []), '@unraid/tailwind-rem-to-rem'],
       },
-      css: {
-        postcss: {
-          plugins: [
-            (await import('tailwindcss')).default({
-              config: './tailwind.config.ts',
-            }),
-            (await import('autoprefixer')).default,
-          ],
-        },
-      },
     };
   },
 };

unraid-ui/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/vue3';
+import type { Preview } from '@storybook/vue3-vite';
 import { registerAllComponents } from '../src/register';
 import '@/styles/index.css';
 
@@ -32,4 +32,4 @@ const preview: Preview = {
   ],
 };
 
-export default preview;
+export default preview;

unraid-ui/.storybook/tailwind.config.ts

@@ -7,5 +7,25 @@ export default {
     '../src/components/**/*.ce.{js,vue,ts}',
     '../src/composables/**/*.{js,vue,ts}',
     '../stories/**/*.stories.{js,ts,jsx,tsx,mdx}',
+    '../src/styles/**/*.css',
+  ],
+  safelist: [
+    // Add commonly used theme classes to safelist to ensure they're generated
+    'bg-background',
+    'text-foreground',
+    'border-border',
+    'bg-card',
+    'text-card-foreground',
+    'bg-primary',
+    'text-primary-foreground',
+    'bg-secondary',
+    'text-secondary-foreground',
+    'bg-muted',
+    'text-muted-foreground',
+    'bg-accent',
+    'text-accent-foreground',
+    'bg-destructive',
+    'text-destructive-foreground',
+    ...(baseConfig.safelist || []),
   ],
 };

unraid-ui/eslint.config.ts

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 import eslint from '@eslint/js';
 // @ts-expect-error No Declaration For This Plugin
 import importPlugin from 'eslint-plugin-import';
@@ -89,70 +92,61 @@ const commonGlobals = {
   es2022: true,
 };
 
-export default [
-  // Base config from recommended configs
-  eslint.configs.recommended,
-  ...tseslint.configs.recommended,
-
-  // TypeScript Files (.ts)
-  {
-    files: ['**/*.ts'],
-    languageOptions: {
-      parser: tseslint.parser,
-      parserOptions: {
-        ...commonLanguageOptions,
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      globals: {
-        ...commonGlobals
+export default [// Base config from recommended configs
+eslint.configs.recommended, ...tseslint.configs.recommended, // TypeScript Files (.ts)
+{
+  files: ['**/*.ts'],
+  languageOptions: {
+    parser: tseslint.parser,
+    parserOptions: {
+      ...commonLanguageOptions,
+      ecmaFeatures: {
+        jsx: true,
       },
     },
-    plugins: {
-      'no-relative-import-paths': noRelativeImportPaths,
-      prettier: prettier,
-      import: importPlugin,
-    },
-    rules: {
-      ...commonRules,
+    globals: {
+      ...commonGlobals
     },
   },
-
-  // Vue Files (.vue)
-  {
-    files: ['**/*.vue'],
-    languageOptions: {
-      parser: vueEslintParser,
-      parserOptions: {
-        ...commonLanguageOptions,
-        parser: tseslint.parser,
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      globals: {
-        ...commonGlobals
+  plugins: {
+    'no-relative-import-paths': noRelativeImportPaths,
+    prettier: prettier,
+    import: importPlugin,
+  },
+  rules: {
+    ...commonRules,
+  },
+}, // Vue Files (.vue)
+{
+  files: ['**/*.vue'],
+  languageOptions: {
+    parser: vueEslintParser,
+    parserOptions: {
+      ...commonLanguageOptions,
+      parser: tseslint.parser,
+      ecmaFeatures: {
+        jsx: true,
       },
     },
-    plugins: {
-      'no-relative-import-paths': noRelativeImportPaths,
-      prettier: prettier,
-      import: importPlugin,
-      vue: vuePlugin,
-    },
-    rules: {
-      ...commonRules,
-      ...vueRules,
+    globals: {
+      ...commonGlobals
     },
   },
-
-  // Ignores
-  {
-    ignores: [
-      'src/graphql/generated/client/**/*',
-      'src/global.d.ts',
-      'eslint.config.ts',
-    ],
+  plugins: {
+    'no-relative-import-paths': noRelativeImportPaths,
+    prettier: prettier,
+    import: importPlugin,
+    vue: vuePlugin,
   },
-];
+  rules: {
+    ...commonRules,
+    ...vueRules,
+  },
+}, // Ignores
+{
+  ignores: [
+    'src/graphql/generated/client/**/*',
+    'src/global.d.ts',
+    'eslint.config.ts',
+  ],
+}, ...storybook.configs["flat/recommended"]];

unraid-ui/package.json

@@ -34,10 +34,7 @@
     "preunraid:deploy": "pnpm build:wc",
     "unraid:deploy": "just deploy",
     "// Storybook": "",
-    "prestorybook": "pnpm storybook:css",
     "storybook": "storybook dev -p 6006",
-    "storybook:css": "node scripts/build-style.mjs",
-    "prebuild-storybook": "pnpm storybook:css",
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
@@ -51,56 +48,53 @@
     "@jsonforms/core": "^3.5.1",
     "@jsonforms/vue": "^3.5.1",
     "@jsonforms/vue-vanilla": "^3.5.1",
+    "@tailwindcss/vite": "^4.1.10",
     "@vueuse/core": "^13.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.2.5",
     "kebab-case": "^2.0.1",
     "lucide-vue-next": "^0.519.0",
-    "shadcn-vue": "^2.0.0",
     "marked": "^15.0.0",
     "reka-ui": "^2.1.1",
-    "tailwind-merge": "^2.6.0",
+    "shadcn-vue": "^2.0.0",
+    "tailwind-merge": "^3.3.1",
     "vue-sonner": "^2.0.0"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/builder-vite": "^8.6.12",
-    "@storybook/vue3": "^8.6.12",
-    "@storybook/vue3-vite": "^8.6.12",
-    "@tailwindcss/typography": "^0.5.15",
+    "@storybook/addon-docs": "^9.0.13",
+    "@storybook/addon-links": "^9.0.13",
+    "@storybook/builder-vite": "^9.0.13",
+    "@storybook/vue3-vite": "^9.0.13",
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/vue": "^8.0.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.0.0",
     "@types/testing-library__vue": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
-    "@unraid/tailwind-rem-to-rem": "^1.1.0",
+    "@unraid/tailwind-rem-to-rem": "2.0.0",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vitest/coverage-v8": "^3.0.0",
     "@vitest/ui": "^3.0.0",
     "@vue/test-utils": "^2.4.0",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.20",
     "concurrently": "^9.1.2",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-no-relative-import-paths": "^1.6.1",
     "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-storybook": "9.0.13",
     "eslint-plugin-vue": "^10.0.0",
     "happy-dom": "^18.0.0",
     "postcss": "^8.4.49",
-    "postcss-import": "^16.1.0",
     "prettier": "3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "rimraf": "^6.0.1",
-    "storybook": "^8.6.12",
-    "tailwind-rem-to-rem": "github:unraid/tailwind-rem-to-rem",
-    "tailwindcss": "^3.0.0",
+    "storybook": "^9.0.13",
+    "tailwindcss": "4.1.10",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.13.0",

unraid-ui/src/components/brand/BrandButton.vue

@@ -49,7 +49,7 @@ const classes = computed(() => {
       brandButtonVariants({ variant: props.variant, size: props.size, padding: props.padding }),
       props.class
     ),
-    icon: `${iconSize} fill-current flex-shrink-0`,
+    icon: `${iconSize} fill-current shrink-0`,
   };
 });
 const needsBrandGradientBackground = computed(() => {
@@ -71,12 +71,12 @@ const needsBrandGradientBackground = computed(() => {
   >
     <div
       v-if="variant === 'fill'"
-      class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:opacity-60 group-focus:opacity-60"
+      class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:opacity-60 group-focus:opacity-60"
     />
     <!-- gives outline buttons the brand gradient background -->
     <div
       v-if="needsBrandGradientBackground"
-      class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-gradient-to-r from-unraid-red to-orange opacity-0 transition-all rounded-md group-hover:opacity-100 group-focus:opacity-100"
+      class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange opacity-0 transition-all rounded-md group-hover:opacity-100 group-focus:opacity-100"
     />
 
     <component :is="icon" v-if="icon" :class="classes.icon" />

unraid-ui/src/components/brand/brand-loading.variants.ts

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const brandLoadingVariants = cva(
-  'inline-flex items-center justify-center w-full h-full aspect-[7/4]',
+  'inline-flex items-center justify-center w-full h-full aspect-7/4',
   {
     variants: {
       variant: {

unraid-ui/src/components/common/badge/Badge.vue

@@ -40,8 +40,8 @@ const badgeClasses = computed(() => {
 
 <template>
   <span :class="[badgeClasses.badge, props.class]">
-    <component :is="icon" v-if="icon" class="flex-shrink-0" :class="badgeClasses.icon" />
+    <component :is="icon" v-if="icon" class="shrink-0" :class="badgeClasses.icon" />
     <slot />
-    <component :is="iconRight" v-if="iconRight" class="flex-shrink-0" :class="badgeClasses.icon" />
+    <component :is="iconRight" v-if="iconRight" class="shrink-0" :class="badgeClasses.icon" />
   </span>
 </template>

unraid-ui/src/components/common/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "

unraid-ui/src/components/common/dropdown-menu/DropdownMenuItem.vue

@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+        'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
         inset && 'pl-8',
         props.class
       )