fix(admin): migrate tailwindcss config to v4 (#9940)

toeverything · Feb 5, 2025 · 10233f1 · 10233f1
1 parent 14fbb8b
commit 10233f1
Show file tree

Hide file tree

Showing 4 changed files with 386 additions and 28 deletions.
diff --git a/packages/frontend/admin/src/global.css b/packages/frontend/admin/src/global.css
@@ -1,6 +1,93 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@config '../tailwind.config.js';
+
+@import 'tailwindcss';
+@import 'tailwindcss/utilities';
+
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  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);
+  }
+}
 
 @layer base {
   :root {

diff --git a/tools/cli/package.json b/tools/cli/package.json
@@ -20,6 +20,7 @@
     "@napi-rs/simple-git": "^0.1.19",
     "@perfsee/webpack": "^1.13.0",
     "@sentry/webpack-plugin": "^3.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@vanilla-extract/webpack-plugin": "^2.3.15",
     "autoprefixer": "^10.4.20",
     "clipanion": "^3.2.1",

diff --git a/tools/cli/src/webpack/index.ts b/tools/cli/src/webpack/index.ts
@@ -255,25 +255,24 @@ export function createWebpackConfig(
                   loader: 'postcss-loader',
                   options: {
                     postcssOptions: {
-                      plugins: [
-                        cssnano({
-                          preset: [
-                            'default',
-                            {
-                              convertValues: false,
-                            },
+                      plugins: pkg.join('tailwind.config.js').exists()
+                        ? [
+                            [
+                              '@tailwindcss/postcss',
+                              require(pkg.join('tailwind.config.js').value),
+                            ],
+                            ['autoprefixer'],
+                          ]
+                        : [
+                            cssnano({
+                              preset: [
+                                'default',
+                                {
+                                  convertValues: false,
+                                },
+                              ],
+                            }),
                           ],
-                        }),
-                      ].concat(
-                        pkg.join('tailwind.config.js').exists()
-                          ? [
-                              require('tailwindcss')(
-                                require(pkg.join('tailwind.config.js').value)
-                              ),
-                              'autoprefixer',
-                            ]
-                          : []
-                      ),
                     },
                   },
                 },