WIP: Upgrade to tailwind 4

.storybook/main.mjs

@@ -1,7 +1,4 @@
 import path from "path"
-import { cascadeLayerPrefixer } from "../utils/cascadeLayerPrefixer"
-import tailwindcss from "tailwindcss"
-import autoprefixer from "autoprefixer"
 
 export default {
   stories: ["../stories/Introduction.mdx", "../stories/**/*stories*"],
@@ -12,57 +9,40 @@ export default {
     "@whitespace/storybook-addon-html",
     "@storybook/addon-a11y",
     "@storybook/addon-webpack5-compiler-swc",
-  ],
-
-  staticDirs: ["./static"],
-
-  webpackFinal: (config) => {
-    return {
-      ...config,
-      entry: [
-        ...config.entry,
-
-        // Load fonts and tailwind classes AFTER component styling
-        // This allows overriding default component styling using tailwind
-        "./main.scss",
-      ],
-      resolve: {
-        ...config.resolve,
-        alias: {
-          ...config.resolve.alias,
-          "~": path.resolve(__dirname, ".."),
-        },
-      },
-      module: {
-        ...config.module,
+    {
+      name: "@storybook/addon-styling-webpack",
+      options: {
         rules: [
           {
-            test: /\.scss$/,
+            test: /\.css$/,
             use: [
               "style-loader",
               "css-loader",
               {
                 loader: "postcss-loader",
                 options: {
-                  postcssOptions: {
-                    plugins: [
-                      tailwindcss,
-                      cascadeLayerPrefixer({
-                        layerName: "components",
-                        fileNameMatcher: /\/components\/.+/,
-                      }),
-                      autoprefixer,
-                    ],
-                  },
+                  postcssOptions: { plugins: ["@tailwindcss/postcss"] },
                 },
               },
-              "sass-loader",
             ],
           },
-          ...config.module.rules,
         ],
       },
-      plugins: [...config.plugins],
+    },
+  ],
+
+  staticDirs: ["./static"],
+
+  webpackFinal: (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "~": path.resolve(__dirname, ".."),
+        },
+      },
     }
   },
 

.storybook/preview.jsx

@@ -15,6 +15,8 @@ import colors from "../colors.json"
 import MuffibookTheme from "./MuffibookTheme"
 import SourceLinks from "./SourceLinks"
 
+import "../main.css"
+
 const cssRoot = document.querySelector(":root")
 const cssVariables = getColorVariables(addContrastColors(colors))
 

components/Alert/index.tsx

@@ -1,6 +1,5 @@
 import React from "react"
-import classNames from "classnames"
-import "./index.scss"
+import { twMerge } from "tailwind-merge"
 import XMarkIcon from "@heroicons/react/20/solid/XMarkIcon"
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -11,26 +10,57 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
 export default function Alert(props: AlertProps): JSX.Element {
   const { variant, className, onClose, children, ...rest } = props
 
-  const usedClassName = classNames(
-    "Alert",
-    {
-      [`Alert--${variant}`]: variant,
-      "Alert--dismissable": onClose,
-    },
-    className,
+  const baseClasses = "text-sm rounded-md px-4 py-4"
+
+  const variantClasses: Record<NonNullable<AlertProps["variant"]>, string> = {
+    primary: "text-primary-800 bg-primary-50",
+    neutral: "text-neutral-800 bg-neutral-50",
+    success: "text-success-800 bg-success-50",
+    danger: "text-danger-800 bg-danger-50",
+    warning: "text-warning-800 bg-warning-50",
+    info: "text-info-800 bg-info-50",
+  }
+
+  const closeVariantClasses: Record<
+    NonNullable<AlertProps["variant"]>,
+    string
+  > = {
+    primary: "text-primary-500 hover:text-primary-700",
+    neutral: "text-neutral-500 hover:text-neutral-700",
+    success: "text-success-500 hover:text-success-700",
+    danger: "text-danger-500 hover:text-danger-700",
+    warning: "text-warning-500 hover:text-warning-700",
+    info: "text-info-500 hover:text-info-700",
+  }
+
+  // original SCSS used padding-right: 3.25rem for dismissable alerts -> use arbitrary value
+  const dismissableClasses = onClose ? "relative pr-[3.25rem]" : ""
+
+  const usedClassName = twMerge(
+    baseClasses,
+    variant ? variantClasses[variant] : "",
+    dismissableClasses,
+    className ?? "",
   )
 
+  const closeClassName = twMerge(
+    "p-4 absolute right-0 top-0 cursor-pointer",
+    variant ? closeVariantClasses[variant] : closeVariantClasses["neutral"],
+  )
+
+  const iconClassName = "w-5 h-5"
+
   return (
     <div className={usedClassName} role="alert" {...rest}>
       {children}
       {onClose && (
         <button
-          className="Alert__close"
+          className={closeClassName}
           type="button"
           onClick={onClose}
           aria-label="Close"
         >
-          <XMarkIcon />
+          <XMarkIcon className={iconClassName} />
         </button>
       )}
     </div>

components/AlertIcon/index.tsx

@@ -1,6 +1,5 @@
 import React from "react"
-import classNames from "classnames"
-import "./index.scss"
+import { twMerge } from "tailwind-merge"
 
 export interface AlertIconProps extends React.HTMLAttributes<SVGElement> {
   variant?: "primary" | "neutral" | "success" | "danger" | "warning" | "info"
@@ -10,12 +9,24 @@ export interface AlertIconProps extends React.HTMLAttributes<SVGElement> {
 export default function AlertIcon(props: AlertIconProps): JSX.Element {
   const { icon: Icon, variant, className, ...rest } = props
 
-  const usedClassName = classNames(
-    "AlertIcon",
-    {
-      [`AlertIcon--${variant}`]: variant,
-    },
-    className,
+  const base = "w-5 h-5 flex-none mr-3"
+
+  const variantClasses: Record<
+    NonNullable<AlertIconProps["variant"]>,
+    string
+  > = {
+    neutral: "text-neutral-400",
+    primary: "text-primary-400",
+    success: "text-success-400",
+    danger: "text-danger-400",
+    warning: "text-warning-400",
+    info: "text-info-400",
+  }
+
+  const usedClassName = twMerge(
+    base,
+    variant ? variantClasses[variant] : "",
+    className ?? "",
   )
 
   return <Icon className={usedClassName} {...rest} />