@linktr.ee/linkapp 0.0.22 → 0.0.24

package/dev-server/README.md

@@ -1,13 +1,13 @@
 # Development Server Setup
 
-This directory contains a custom Vite-based development server for previewing LinkApp components with multiple routes and iframe embeds.
+This directory contains a custom Rsbuild-based development server for previewing LinkApp components with multiple routes and iframe embeds.
 
 ## Structure
 
 ```
 dev-server/
 ├── index.html              # Root preview page entry
-├── vite.config.ts         # Vite configuration (MPA setup)
+├── rsbuild.config.ts      # Rsbuild configuration
 ├── server.ts              # TypeScript server launcher
 ├── preview/
 │   ├── main.tsx          # Preview page React entry
@@ -44,12 +44,12 @@ dev-server/
 npm run dev:preview
 ```
 
-This command uses `tsx` to run the TypeScript server script, which programmatically starts Vite with the custom configuration.
+This command uses `tsx` to run the TypeScript server script, which programmatically starts Rsbuild with the custom configuration.
 
 ## Technical Details
 
 ### Multi-Page Application (MPA)
-The setup uses Vite's MPA capability with multiple HTML entry points:
+The setup uses Rsbuild's MPA capability with multiple HTML entry points:
 - Root: `index.html` → Preview page
 - `/classic/`: `classic/index.html` → Classic layout
 - `/featured/`: `featured/index.html` → Featured layout
@@ -77,6 +77,6 @@ Server runs on port 3000 with `strictPort: true` to match requirements.
 This implementation follows a clean separation of concerns:
 - Original app files (`1-demo/app/*`) remain untouched
 - New dev-server directory contains all preview infrastructure
-- Uses Vite's native MPA support for clean routing (no client-side router)
+- Uses Rsbuild's native MPA support for clean routing (no client-side router)
 - TypeScript throughout for type safety
 - Programmatic server creation for flexibility

package/dev-server/{vite-env.d.ts → env.d.ts}

@@ -1,4 +1,4 @@
-/// <reference types="vite/client" />
+/// <reference types="@rsbuild/core/types" />
 
 import type { LinkAppSettings } from '../src/types'
 

package/dev-server/featured/main.tsx

@@ -2,14 +2,16 @@ import Featured from "@/app/featured";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@/app/globals.css";
+import { THEME_PRESETS } from "../shared/theme-presets";
+import { getThemeFromUrl, mergeThemeProps } from "../shared/theme-utils";
 
-// Conditionally import Layout if it exists
-const layoutModules = import.meta.glob("@/app/layout.{ts,tsx}", {
-  eager: true,
-});
-const Layout = Object.values(layoutModules)[0]?.default as
-  | React.ComponentType<{ children: React.ReactNode; theme?: any }>
-  | undefined;
+// Try to import FeaturedCarousel if it exists
+let FeaturedCarousel: React.ComponentType<any> | null = null;
+try {
+  FeaturedCarousel = require("@/app/featured-carousel").default;
+} catch (e) {
+  // featured-carousel.tsx doesn't exist, that's ok
+}
 
 // Declare global window property for theme application
 declare global {
@@ -21,307 +23,21 @@ declare global {
 // Preview props injected by dev server via Vite define
 declare const __PREVIEW_PROPS__: Record<string, unknown>;
 
-// Theme presets matching Preview.tsx
-const THEME_PRESETS: Record<string, Record<string, string>> = {
-  default: {
-    "--button-style-text": "#000000",
-    "--button-style-background": "#ffffff",
-    "--button-style-background-hover": "color-mix(in srgb, #ffffff 93%, #000000 7%)",
-    "--button-style-border": "none",
-    "--button-style-border-color": "transparent",
-    "--button-style-shadow": "none",
-    "--button-style-shadow-color": "#000000",
-    "--button-style-contrast-color": "#000000",
-    "--button-style-radius": "8px",
-    "--button-style-inner-radius": "min(8px, max(4px, calc(8px - 8px)))",
-    "--button-style-skeleton-color": "rgba(0, 0, 0, 0.05)",
-    "--link-gap": "14px",
-    "--link-inner-padding": "7px",
-    "--link-preview-thumbnail-width": "160px",
-    "--linkRadius": "8px",
-    "--profile-container-desktop-width": "580px",
-    "--profileBackground": "#eceef1",
-    "--background-contrast-color": "#000000",
-    "--bodyText": "#000000",
-    "--profileTitleText": "#000000",
-    "--profileDescriptionText": "#000000",
-    "--defaultAvatarBackground": "#000000",
-    "--defaultAvatarText": "#ffffff",
-    "--socialLinkFill": "#000000",
-    "--linkBackground": "#ffffff",
-    "--linkText": "#000000",
-    "--linkHoverBackground": "color-mix(in srgb, #ffffff 93%, #000000 7%)",
-    "--linkHoverText": "#000000",
-    "--linkShadow": "#000000",
-    "--bannerBackground": "#ffffff",
-    "--bannerText": "#000000",
-    "--desktop-frame-color": "color-mix(in srgb, #eceef1 88%, black 12%)",
-    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontWeightNormal": "500",
-    "--profileFontWeightBold": "700",
-    "--profileDescriptionFontWeight": "500",
-    "--linkTextFontWeight": "500",
-    "--headerFontWeight": "700",
-    "--header-font-weight": "600",
-    "--embedLinkTextFontWeight": "500",
-    "--signupSubmitTextFontWeight": "700",
-    "--bannerFontWeight": "700",
-    "--headerFontSize": "normal",
-    "--header-bio-font-size": "16px",
-    "--embedLinkTextFontSize": "14px",
-    "--signupSubmitTextFontSize": "14px",
-    "--linkHeaderFontSize": "14px",
-    "--bannerFontSize": "14px",
-    "--profileDescriptionLineHeight": "1.5",
-    "--headerLineHeight": "1.5",
-    "--header-text-color": "#000000",
-  },
-  dark: {
-    "--button-style-text": "#ffffff",
-    "--button-style-background": "#1f2937",
-    "--button-style-background-hover": "color-mix(in srgb, #1f2937 93%, #ffffff 7%)",
-    "--button-style-border": "none",
-    "--button-style-border-color": "transparent",
-    "--button-style-shadow": "none",
-    "--button-style-shadow-color": "#000000",
-    "--button-style-contrast-color": "#ffffff",
-    "--button-style-radius": "8px",
-    "--button-style-inner-radius": "min(8px, max(4px, calc(8px - 8px)))",
-    "--button-style-skeleton-color": "rgba(255, 255, 255, 0.1)",
-    "--link-gap": "14px",
-    "--link-inner-padding": "7px",
-    "--link-preview-thumbnail-width": "160px",
-    "--linkRadius": "8px",
-    "--profile-container-desktop-width": "580px",
-    "--profileBackground": "#111827",
-    "--background-contrast-color": "#ffffff",
-    "--bodyText": "#ffffff",
-    "--profileTitleText": "#ffffff",
-    "--profileDescriptionText": "#ffffff",
-    "--defaultAvatarBackground": "#ffffff",
-    "--defaultAvatarText": "#000000",
-    "--socialLinkFill": "#ffffff",
-    "--linkBackground": "#1f2937",
-    "--linkText": "#ffffff",
-    "--linkHoverBackground": "color-mix(in srgb, #1f2937 93%, #ffffff 7%)",
-    "--linkHoverText": "#ffffff",
-    "--linkShadow": "#000000",
-    "--bannerBackground": "#1f2937",
-    "--bannerText": "#ffffff",
-    "--desktop-frame-color": "color-mix(in srgb, #111827 88%, white 12%)",
-    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontWeightNormal": "500",
-    "--profileFontWeightBold": "700",
-    "--profileDescriptionFontWeight": "500",
-    "--linkTextFontWeight": "500",
-    "--headerFontWeight": "700",
-    "--header-font-weight": "600",
-    "--embedLinkTextFontWeight": "500",
-    "--signupSubmitTextFontWeight": "700",
-    "--bannerFontWeight": "700",
-    "--headerFontSize": "normal",
-    "--header-bio-font-size": "16px",
-    "--embedLinkTextFontSize": "14px",
-    "--signupSubmitTextFontSize": "14px",
-    "--linkHeaderFontSize": "14px",
-    "--bannerFontSize": "14px",
-    "--profileDescriptionLineHeight": "1.5",
-    "--headerLineHeight": "1.5",
-    "--header-text-color": "#ffffff",
-  },
-  purple: {
-    "--button-style-text": "#ffffff",
-    "--button-style-background": "#7c3aed",
-    "--button-style-background-hover": "color-mix(in srgb, #7c3aed 93%, #ffffff 7%)",
-    "--button-style-border": "none",
-    "--button-style-border-color": "transparent",
-    "--button-style-shadow": "none",
-    "--button-style-shadow-color": "#000000",
-    "--button-style-contrast-color": "#ede9fe",
-    "--button-style-radius": "16px",
-    "--button-style-inner-radius": "min(16px, max(4px, calc(16px - 8px)))",
-    "--button-style-skeleton-color": "rgba(124, 58, 237, 0.1)",
-    "--link-gap": "14px",
-    "--link-inner-padding": "7px",
-    "--link-preview-thumbnail-width": "160px",
-    "--linkRadius": "16px",
-    "--profile-container-desktop-width": "580px",
-    "--profileBackground": "#faf5ff",
-    "--background-contrast-color": "#1f2937",
-    "--bodyText": "#1f2937",
-    "--profileTitleText": "#1f2937",
-    "--profileDescriptionText": "#1f2937",
-    "--defaultAvatarBackground": "#7c3aed",
-    "--defaultAvatarText": "#ffffff",
-    "--socialLinkFill": "#1f2937",
-    "--linkBackground": "#7c3aed",
-    "--linkText": "#ffffff",
-    "--linkHoverBackground": "color-mix(in srgb, #7c3aed 93%, #ffffff 7%)",
-    "--linkHoverText": "#ffffff",
-    "--linkShadow": "#7c3aed",
-    "--bannerBackground": "#7c3aed",
-    "--bannerText": "#ffffff",
-    "--desktop-frame-color": "color-mix(in srgb, #faf5ff 88%, black 12%)",
-    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontWeightNormal": "500",
-    "--profileFontWeightBold": "700",
-    "--profileDescriptionFontWeight": "500",
-    "--linkTextFontWeight": "500",
-    "--headerFontWeight": "700",
-    "--header-font-weight": "600",
-    "--embedLinkTextFontWeight": "500",
-    "--signupSubmitTextFontWeight": "700",
-    "--bannerFontWeight": "700",
-    "--headerFontSize": "normal",
-    "--header-bio-font-size": "16px",
-    "--embedLinkTextFontSize": "14px",
-    "--signupSubmitTextFontSize": "14px",
-    "--linkHeaderFontSize": "14px",
-    "--bannerFontSize": "14px",
-    "--profileDescriptionLineHeight": "1.5",
-    "--headerLineHeight": "1.5",
-    "--header-text-color": "#1f2937",
-  },
-  outline: {
-    "--button-style-text": "#000000",
-    "--button-style-background": "transparent",
-    "--button-style-background-hover": "rgba(0, 0, 0, 0.05)",
-    "--button-style-border": "2px solid currentColor",
-    "--button-style-border-color": "#000000",
-    "--button-style-shadow": "none",
-    "--button-style-shadow-color": "#000000",
-    "--button-style-contrast-color": "#ffffff",
-    "--button-style-radius": "24px",
-    "--button-style-inner-radius": "min(24px, max(4px, calc(24px - 8px)))",
-    "--button-style-skeleton-color": "rgba(0, 0, 0, 0.05)",
-    "--link-gap": "14px",
-    "--link-inner-padding": "7px",
-    "--link-preview-thumbnail-width": "160px",
-    "--linkRadius": "24px",
-    "--profile-container-desktop-width": "580px",
-    "--profileBackground": "#ffffff",
-    "--background-contrast-color": "#000000",
-    "--bodyText": "#000000",
-    "--profileTitleText": "#000000",
-    "--profileDescriptionText": "#000000",
-    "--defaultAvatarBackground": "#000000",
-    "--defaultAvatarText": "#ffffff",
-    "--socialLinkFill": "#000000",
-    "--linkBackground": "transparent",
-    "--linkText": "#000000",
-    "--linkHoverBackground": "rgba(0, 0, 0, 0.05)",
-    "--linkHoverText": "#000000",
-    "--linkShadow": "#000000",
-    "--bannerBackground": "#ffffff",
-    "--bannerText": "#000000",
-    "--desktop-frame-color": "color-mix(in srgb, #ffffff 88%, black 12%)",
-    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontWeightNormal": "500",
-    "--profileFontWeightBold": "700",
-    "--profileDescriptionFontWeight": "500",
-    "--linkTextFontWeight": "500",
-    "--headerFontWeight": "700",
-    "--header-font-weight": "600",
-    "--embedLinkTextFontWeight": "500",
-    "--signupSubmitTextFontWeight": "700",
-    "--bannerFontWeight": "700",
-    "--headerFontSize": "normal",
-    "--header-bio-font-size": "16px",
-    "--embedLinkTextFontSize": "14px",
-    "--signupSubmitTextFontSize": "14px",
-    "--linkHeaderFontSize": "14px",
-    "--bannerFontSize": "14px",
-    "--profileDescriptionLineHeight": "1.5",
-    "--headerLineHeight": "1.5",
-    "--header-text-color": "#000000",
-  },
-  rounded: {
-    "--button-style-text": "#ffffff",
-    "--button-style-background": "#059669",
-    "--button-style-background-hover": "color-mix(in srgb, #059669 93%, #ffffff 7%)",
-    "--button-style-border": "none",
-    "--button-style-border-color": "transparent",
-    "--button-style-shadow": "none",
-    "--button-style-shadow-color": "#000000",
-    "--button-style-contrast-color": "#d1fae5",
-    "--button-style-radius": "28px",
-    "--button-style-inner-radius": "28px",
-    "--button-style-skeleton-color": "rgba(5, 150, 105, 0.1)",
-    "--link-gap": "14px",
-    "--link-inner-padding": "7px",
-    "--link-preview-thumbnail-width": "160px",
-    "--linkRadius": "28px",
-    "--profile-container-desktop-width": "580px",
-    "--profileBackground": "#ecfdf5",
-    "--background-contrast-color": "#1f2937",
-    "--bodyText": "#1f2937",
-    "--profileTitleText": "#1f2937",
-    "--profileDescriptionText": "#1f2937",
-    "--defaultAvatarBackground": "#059669",
-    "--defaultAvatarText": "#ffffff",
-    "--socialLinkFill": "#1f2937",
-    "--linkBackground": "#059669",
-    "--linkText": "#ffffff",
-    "--linkHoverBackground": "color-mix(in srgb, #059669 93%, #ffffff 7%)",
-    "--linkHoverText": "#ffffff",
-    "--linkShadow": "#059669",
-    "--bannerBackground": "#059669",
-    "--bannerText": "#ffffff",
-    "--desktop-frame-color": "color-mix(in srgb, #ecfdf5 88%, black 12%)",
-    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    "--profileFontWeightNormal": "500",
-    "--profileFontWeightBold": "700",
-    "--profileDescriptionFontWeight": "500",
-    "--linkTextFontWeight": "500",
-    "--headerFontWeight": "700",
-    "--header-font-weight": "600",
-    "--embedLinkTextFontWeight": "500",
-    "--signupSubmitTextFontWeight": "700",
-    "--bannerFontWeight": "700",
-    "--headerFontSize": "normal",
-    "--header-bio-font-size": "16px",
-    "--embedLinkTextFontSize": "14px",
-    "--signupSubmitTextFontSize": "14px",
-    "--linkHeaderFontSize": "14px",
-    "--bannerFontSize": "14px",
-    "--profileDescriptionLineHeight": "1.5",
-    "--headerLineHeight": "1.5",
-    "--header-text-color": "#1f2937",
-  },
-};
+// Extract just the variables from THEME_PRESETS for theme lookups
+const THEME_VARS = Object.fromEntries(
+  Object.entries(THEME_PRESETS).map(([key, { variables }]) => [key, variables])
+);
 
-// Get theme from URL parameter
+// Get theme variables and groupLayoutOption from URL
 const params = new URLSearchParams(window.location.search);
-const themeParam = params.get('theme') || 'default';
-const themeVariables = THEME_PRESETS[themeParam] || THEME_PRESETS.default;
+const groupLayoutOptionParam = params.get('groupLayoutOption');
+const themeVariables = getThemeFromUrl(THEME_VARS);
 
+// Merge with preview props and add groupLayoutOption
 const previewProps = __PREVIEW_PROPS__ || {};
-
-// Merge theme from URL with preview props
-const mergedProps = {
-  ...previewProps,
-  theme: {
-    cssVariables: themeVariables,
-    // Legacy properties (deprecated) - derived from cssVariables
-    textColor: themeVariables["--button-style-text"] || "#000000",
-    backgroundColor: themeVariables["--button-style-background"] || "#ffffff",
-    borderRadius: themeVariables["--button-style-inner-radius"] || "12px",
-    borderColor: themeVariables["--button-style-border-color"] || "#e5e7eb",
-    backgroundHover: themeVariables["--button-style-background-hover"] || "#f3f4f6",
-    contrastColor: themeVariables["--button-style-contrast-color"] || "#ffffff",
-    textHoverColor: themeVariables["--linkHoverText"] || "#111827",
-  },
-};
+const mergedProps = mergeThemeProps(themeVariables, previewProps, {
+  groupLayoutOption: groupLayoutOptionParam || undefined,
+});
 
 // Apply theme CSS variables on mount
 if (themeVariables && window.__linkapp_applyTheme) {
@@ -333,14 +49,19 @@ if (!rootElement) {
   throw new Error("Root element not found");
 }
 
+// Select the appropriate component based on groupLayoutOption parameter
+const LayoutComponent = (groupLayoutOptionParam === 'carousel' && FeaturedCarousel)
+  ? FeaturedCarousel
+  : Featured;
+
+console.log('[Featured Dev Server] Rendering:', {
+  groupLayoutOption: groupLayoutOptionParam,
+  component: groupLayoutOptionParam === 'carousel' && FeaturedCarousel ? 'FeaturedCarousel' : 'Featured',
+  hasFeaturedCarousel: !!FeaturedCarousel,
+});
+
 createRoot(rootElement).render(
   <StrictMode>
-    {Layout ? (
-      <Layout theme={mergedProps.theme}>
-        <Featured {...mergedProps} />
-      </Layout>
-    ) : (
-      <Featured {...mergedProps} />
-    )}
+    <LayoutComponent {...mergedProps} />
   </StrictMode>,
 );

package/dev-server/package.json

@@ -10,24 +10,23 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-portal": "^1.1.4",
     "@radix-ui/react-tabs": "^1.1.7",
-    "@tailwindcss/vite": "^4.1.14",
+    "@tailwindcss/postcss": "^4.1.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "iframe-resizer-react": "^1.1.0",
     "lucide-react": "^0.545.0",
+    "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.14",
+    "@rsbuild/core": "^1.1.14",
+    "@rsbuild/plugin-react": "^1.1.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19",
-    "@vitejs/plugin-react": "^4.3.4",
-    "postcss": "^8.5.6",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5",
-    "vite": "^6.0.3"
+    "typescript": "^5"
   }
 }

package/dev-server/postcss/tailwind-source-fallback.js

@@ -0,0 +1,94 @@
+import { dirname, relative } from 'node:path'
+import postcss from 'postcss'
+
+const DEFAULT_GLOB = '**/*.{ts,tsx,js,jsx,mdx,html}'
+
+function toPosixPath(value) {
+  return value.replace(/\\/g, '/')
+}
+
+export function createTailwindSourceFallback(options = {}) {
+  const { projectRoot, glob = DEFAULT_GLOB } = options
+
+  if (!projectRoot) {
+    const noop = () => {
+      const postcssPlugin = {
+        postcssPlugin: 'linkapp:tailwind-source-fallback:noop',
+        Once() {},
+      }
+
+      postcssPlugin.postcss = true
+      return postcssPlugin
+    }
+
+    noop.postcss = true
+    noop.__linkappTailwindSource = true
+    return noop
+  }
+
+  const plugin = () => {
+    const postcssPlugin = {
+      postcssPlugin: 'linkapp:tailwind-source-fallback',
+      Once(root, { result }) {
+        const sourceFile = typeof result.opts.from === 'string' ? result.opts.from : null
+        if (!sourceFile) {
+          return
+        }
+
+        const normalizedSourceFile = toPosixPath(sourceFile)
+        const normalizedProjectRoot = toPosixPath(
+          projectRoot.endsWith('/') ? projectRoot : `${projectRoot}/`
+        )
+
+        if (!normalizedSourceFile.startsWith(normalizedProjectRoot)) {
+          return
+        }
+
+        let hasSourceDirective = false
+        root.walkAtRules('source', () => {
+          hasSourceDirective = true
+          return false
+        })
+
+        if (hasSourceDirective) {
+          return
+        }
+
+        const cssDir = dirname(sourceFile)
+        const relativeToRoot = relative(cssDir, projectRoot)
+        const baseSegment = relativeToRoot === '' ? '.' : relativeToRoot
+        const normalizedBase = toPosixPath(baseSegment)
+        const trimmedBase = normalizedBase.replace(/\/$/, '')
+
+        const sourcePath =
+          trimmedBase === '.' || trimmedBase === ''
+            ? `./${glob}`
+            : `${trimmedBase}/${glob}`
+
+        const atRule = postcss.atRule({
+          name: 'source',
+          params: `"${sourcePath}"`,
+        })
+
+        let lastImport
+        root.walkAtRules('import', (node) => {
+          lastImport = node
+        })
+
+        if (lastImport) {
+          lastImport.after(atRule)
+        } else {
+          root.prepend(atRule)
+        }
+      },
+    }
+
+    postcssPlugin.postcss = true
+    return postcssPlugin
+  }
+
+  plugin.postcss = true
+  plugin.__linkappTailwindSource = true
+
+  return plugin
+}

package/dev-server/postcss.config.mjs

@@ -1,5 +1,30 @@
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+import tailwindcss from '@tailwindcss/postcss'
+import { createTailwindSourceFallback } from './postcss/tailwind-source-fallback.js'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+const userProjectRoot = process.env.LINKAPP_USER_PROJECT_PATH
+const projectRoot = userProjectRoot ? resolve(userProjectRoot) : null
+
+const plugins = []
+
+if (projectRoot) {
+  plugins.push(
+    createTailwindSourceFallback({
+      projectRoot,
+    })
+  )
+}
+
+plugins.push(
+  tailwindcss({
+    base: __dirname,
+  })
+)
+
 export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
+  plugins,
 }