feat: update to tailwindcss v4 (#123)

* feat: update to tailwindcss v4

* Fix slack preview

* Better previews

Author: QuiiBz

apps/dashboard/package.json

@@ -43,14 +43,13 @@
     "@next/eslint-plugin-next": "15.2.0",
     "@ogstudio/eslint": "workspace:*",
     "@ogstudio/typescript": "workspace:*",
+    "@tailwindcss/postcss": "^4.0.9",
     "@types/node": "^20",
     "@types/react": "19.0.7",
     "@types/react-dom": "19.0.3",
-    "autoprefixer": "^10.4.19",
     "happy-dom": "^14.7.1",
     "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.0.9",
     "tsx": "^4.19.0",
     "vitest": "^1.6.0"
   }

apps/dashboard/postcss.config.js

@@ -1,7 +1,5 @@
 module.exports = {
   plugins: {
-    'postcss-import': {},
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

apps/dashboard/src/app/globals.css

@@ -1,27 +1,38 @@
-@import url('https://fonts.bunny.net/css?family=inter:400');
-@import "tailwindcss/base";
-@import "@radix-ui/themes/styles.css";
-
-@tailwind components;
-@tailwind utilities;
+@import url('https://fonts.bunny.net/css?family=inter:400') layer(base);
+@import 'tailwindcss';
+@import '@radix-ui/themes/styles.css' layer(base);
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 /**
  * https://github.com/tailwindlabs/tailwindcss/discussions/2394
  * https://github.com/tailwindlabs/tailwindcss/pull/5732
  */
-@layer utilities {
-
+@utility no-scrollbar {
   /* Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
-
-  .no-scrollbar {
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */
-  }
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
 
 input[type=number] {

apps/dashboard/src/components/Element.tsx

@@ -315,10 +315,10 @@ export function Element({ element }: ElementProps) {
       <ContextMenu.Trigger>
         <div
           className={clsx(
-            "element cursor-default select-none outline-1 outline-offset-[3px] hover:outline",
+            "element cursor-default select-none outline-offset-[3px] hover:outline",
             { "outline cursor-move": isSelected },
-            { "!outline !cursor-text": isEditing },
-            { "!outline-dashed": element.tag === "span" },
+            { "outline cursor-text!": isEditing },
+            { "outline-dashed outline-1": element.tag === "span" },
           )}
           id={`element-${element.id}`}
           style={style.elementStyle}

apps/dashboard/src/components/ExportModal/ExportURL.tsx

@@ -24,7 +24,7 @@ export function ExportURL({ exportedKey, dynamicTexts }: ExportURLProps) {
   const { data } = useUser();
   const isSignedIn = Boolean(data && "user" in data);
 
-  const key = exportedKey ?? <span className="blur-sm">{"x".repeat(32)}</span>;
+  const key = exportedKey ?? <span className="blur-xs">{"x".repeat(32)}</span>;
   let url = (
     <>
       {typeof window !== "undefined" ? window.location.origin : ""}/api/og/{key}

apps/dashboard/src/components/ExportModal/Preview.tsx

@@ -1,8 +1,9 @@
-import { Flex, Heading, Text, TextField } from "@radix-ui/themes";
-import { startTransition } from "react";
+import { Flex, Heading, Skeleton, Text, TextField } from "@radix-ui/themes";
+import { startTransition, useEffect, useState } from "react";
 import { OgImage } from "../OgImage";
 import { useElementsStore } from "../../stores/elementsStore";
 import { usePreviewControls } from "../../lib/hooks/usePreviewControls";
+import { renderToImg } from "../../lib/export";
 
 interface PreviewProps {
   dynamicTexts: Record<string, string>;
@@ -12,6 +13,15 @@ interface PreviewProps {
 export function Preview({ dynamicTexts, setDynamicTexts }: PreviewProps) {
   const { preview, PreviewControls } = usePreviewControls();
   const elements = useElementsStore((state) => state.elements);
+  const [src, setSrc] = useState<string | undefined>();
+
+  useEffect(() => {
+    async function render() {
+      setSrc(await renderToImg(elements, dynamicTexts));
+    }
+
+    void render();
+  }, [elements, dynamicTexts]);
 
   return (
     <Flex direction="column" gap="4">
@@ -21,13 +31,9 @@ export function Preview({ dynamicTexts, setDynamicTexts }: PreviewProps) {
       <Flex gap="6" justify="between" align="start" minHeight="353px">
         <Flex direction="column" gap="2">
           <PreviewControls />
-          <OgImage
-            client
-            dynamicTexts={dynamicTexts}
-            elements={elements}
-            preview={preview}
-            size="medium"
-          />
+          <OgImage preview={preview} size="medium" src={src}>
+            {src ? null : <Skeleton height="10%" width="60%" />}
+          </OgImage>
         </Flex>
         <Flex direction="column" flexGrow="1" gap="4" mt="7">
           {Object.keys(dynamicTexts).length === 0 ? (

apps/dashboard/src/components/LeftPanel/ElementRow.tsx

@@ -145,7 +145,7 @@ export const ElementRow = memo(({ element }: ElementRowProps) => {
       </Button>
       <IconButton
         className={clsx("opacity-0 group-hover:opacity-100", {
-          "!opacity-100": !element.visible,
+          "opacity-100!": !element.visible,
         })}
         color="gray"
         mr="1"

apps/dashboard/src/components/OgImage.tsx

@@ -116,7 +116,7 @@ export function OgImage({
       return function Wrapper(props: { children: ReactNode }) {
         return (
           <Flex gap="3" className="w-[480px]">
-            <div className="bg-[#DDDDDD] dark:bg-[#35373B] min-w-1 h-full rounded" />
+            <div className="bg-[#DDDDDD] dark:bg-[#35373B] min-w-1 h-min-content rounded-sm" />
             <Flex direction="column" className="gap-0.5">
               <p className="text-[#1D1C1D] dark:text-[#D1D2D3] text-[15px] font-black">
                 {previewSite}
@@ -153,7 +153,7 @@ export function OgImage({
       <Tag
         className={clsx(
           className,
-          "min-h-[157px] w-[300px] min-w-[300px] flex flex-col items-center justify-center rounded relative group overflow-hidden",
+          "min-h-[157px] w-[300px] min-w-[300px] flex flex-col items-center justify-center rounded-sm relative group overflow-hidden",
           {
             "min-h-[157px] w-[300px] min-w-[300px]": size === "small",
             "min-h-[252px] w-[480px] min-w-[480px]": size === "medium",
@@ -233,7 +233,7 @@ export function OgImage({
         ) : null}
         {preview === "x" ? (
           <span
-            className="absolute bottom-2.5 left-2.5 text-white h-5 px-2 rounded text-[12px]"
+            className="absolute bottom-2.5 left-2.5 text-white h-5 px-2 rounded-sm text-[12px]"
             style={{ backgroundColor: "rgba(0, 0, 0, 0.77)" }}
           >
             {previewTitle}