feat: upgrade to tailwind v4

.storybook/main.ts

@@ -4,14 +4,15 @@ import path from 'path';
 const config: StorybookConfig = {
   stories: [
     '../components/**/*.stories.@(ts|tsx|js|jsx|mdx)',
-    '../theme/**/*.stories.@(ts|tsx|js|jsx|mdx)'
+    '../styles/**/*.stories.@(ts|tsx|js|jsx|mdx)'
   ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
-    'storybook-dark-mode'
+    'storybook-dark-mode',
+    '@storybook/addon-themes'
   ],
   webpackFinal: async (config) => {
     if (config.resolve) {

.storybook/preview.tsx

 import React from 'react';
-import { themes } from '@storybook/theming';
-import { HeroUIProvider } from "@heroui/react";
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { HeroUIProvider } from '@heroui/react';
+import type { Preview, ReactRenderer } from '@storybook/react';
 
-import './style.css';
-import '@/styles/globals.css';
-
-import type { Preview } from '@storybook/react';
+import '@/styles/global.css';
 
 const decorators: Preview['decorators'] = [
   (Story, { globals: { locale, disableAnimation } }) => {
@@ -22,7 +20,14 @@ const decorators: Preview['decorators'] = [
         </div>
       </HeroUIProvider>
     );
-  }
+  },
+  withThemeByClassName<ReactRenderer>({
+    themes: {
+      light: '',
+      dark: 'dark'
+    },
+    defaultTheme: 'light'
+  })
 ];
 
 const parameters: Preview['parameters'] = {
@@ -38,24 +43,6 @@ const parameters: Preview['parameters'] = {
       color: /(background|color)$/i,
       date: /Date$/i
     }
-  },
-  darkMode: {
-    current: 'dark',
-    stylePreview: true,
-    darkClass: 'dark',
-    lightClass: 'light',
-    classTarget: 'html',
-    dark: {
-      ...themes.dark,
-      appBg: '#161616',
-      barBg: 'black',
-      background: 'black',
-      appContentBg: 'black',
-      appBorderRadius: 14
-    },
-    light: {
-      ...themes.light
-    }
   }
 };
 

.storybook/style.css

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-h1 {
-  @apply text-4xl font-bold !text-foreground;
-}
-
-h2 {
-  @apply text-2xl font-bold !text-foreground !border-none;
-}
-
-h3 {
-  @apply text-xl font-bold !text-neutral-600;
-}
-
-.dark .sbdocs-wrapper,
-.dark .sbdocs-preview {
-  background-color: #000000;
-  color: #fff;
-}
-
-.dark .sbdocs-preview {
-  border: 1px solid #292929;
-}
-
-.dark .docblock-code-toggle {
-  background: transparent;
-  color: #d4d4d4;
-}
-
-.dark div:has(.docblock-code-toggle) {
-  background: transparent;
-}
-
-.dark .os-theme-dark {
-  background: #161616;
-  color: #fff;
-}
-
-.dark .sbdocs-title {
-  color: #fff;
-}
-
-.dark .docblock-argstable-head {
-  background: #161616;
-}
-
-.dark .docblock-argstable-head th {
-  color: #bcbcbc;
-  border-bottom: 1px solid #292929 !important;
-}
-
-.dark .docblock-argstable-head th span {
-  color: #bcbcbc;
-}
-
-.dark #docs-root tbody td {
-  background: #161616 !important;
-  color: #bcbcbc !important;
-}
-
-.dark #docs-root tbody tr:first-child td:first-child {
-  border-top-left-radius: 0 !important;
-}
-
-.dark #docs-root tbody tr:first-child td:last-child {
-  border-top-right-radius: 0 !important;
-}
-
-.dark #docs-root tbody tr:not(:first-child) {
-  border-top: 1px solid #292929 !important;
-}

app/layout.tsx

 import Providers from '@/components/layout/Providers';
-import '@/styles/globals.css';
+import '@/styles/global.css';
 
 interface LayoutProps {
   children: React.ReactNode;

components/layout/PageNotFound/styles.module.scss

-@use '@styles/vars.scss';
-
-.notFound {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 10vh 1em;
-  box-sizing: border-box;
-  h2 {
-    font-size: 10em;
-    font-weight: 100;
-    line-height: 0.8;
-    margin: 0;
-    color: #1ea7fd;
-  }
-  a {
-    margin-top: 2em;
-  }
-}
-@include vars.mQuery(xl) {
-  .notFound {
-    font-size: 0.9em;
-  }
-}

components/shared/ResponsiveImage/ResponsiveImage.tsx

@@ -58,7 +58,7 @@ export const ResponsiveImage: React.FC<ResponsiveImageProps> & {
     return (
       <picture>
         {children}
-        <img alt="" {...props} {...rest} />
+        <img {...props} {...rest} />
       </picture>
     );
   }

lib/merge-clsx.ts

@@ -11,12 +11,7 @@ const COMMON_UNITS = ['small', 'medium', 'large'];
  */
 const twMerge = extendTailwindMerge({
   extend: {
-    theme: {
-      opacity: ['disabled'],
-      spacing: ['divider'],
-      borderWidth: COMMON_UNITS,
-      borderRadius: COMMON_UNITS
-    },
+    theme: {},
     classGroups: {
       shadow: [{ shadow: COMMON_UNITS }],
       'font-size': [{ text: ['tiny', ...COMMON_UNITS] }],

package.json

@@ -11,7 +11,8 @@
     "analyze": "cross-env ANALYZE=true next build"
   },
   "dependencies": {
-    "@heroui/react": "2.7.6",
+    "@heroui/react": "2.8.0-beta.4",
+    "@tailwindcss/postcss": "^4.1.6",
     "@types/node": "^22.15.17",
     "@types/react": "^19.1.3",
     "autoprefixer": "^10.4.21",
@@ -24,8 +25,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sharp": "^0.34.1",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss": "^3.4.1",
+    "tailwind-merge": "^3.3.0",
+    "tailwindcss": "^4.1.6",
     "typescript": "^5.8.3"
   },
   "devDependencies": {
@@ -35,6 +36,7 @@
     "@storybook/addon-interactions": "8.6.12",
     "@storybook/addon-links": "^8.6.12",
     "@storybook/addon-onboarding": "8.6.12",
+    "@storybook/addon-themes": "^8.6.12",
     "@storybook/blocks": "8.6.12",
     "@storybook/nextjs": "^8.6.12",
     "@storybook/react": "8.6.12",

postcss.config.js → postcss.config.mjs

-module.exports = {
+export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {}
   }
 };

styles/global.css

+@import 'tailwindcss';
+@plugin './hero.ts';
+@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+@custom-variant dark (&:is(.dark *));

styles/globals.css

-@tailwind base;
-@tailwind components;
-@tailwind utilities;

styles/hero.ts

+import { heroui } from '@heroui/react';
+import themes from './themes';
+
+export default heroui({ themes });

tailwind.config.ts

-import { heroui } from '@heroui/react';
-import colors from './theme/colors';
-
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './theme/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Indivisible', 'sans-serif']
-      }
-    }
-  },
-  darkMode: 'class',
-  plugins: [
-    heroui({
-      themes: {
-        light: colors.light,
-        dark: colors.dark
-      }
-    })
-  ]
-};
-export default config;