From 9b985e387635f6c7cb00a1e94d38523050876220 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Fri, 24 Apr 2026 22:26:18 +0200 Subject: [PATCH] chore(config): add shared tailwind.config.css outer shell MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Introduces `packages/config/tailwind.config.css` as the CSS-first orchestration layer shared by every app. It collects three things that were previously duplicated across every app's main CSS entry: - `@import` of `packages/ui/build/css/source/global.css` — the design system's CSS variable definitions. - `@import` of `dark.css`, `light.css`, and `classic-dark.css` — per-mode overrides for those variables. - `@import` of `packages/config/tailwind-utilities/hit-area.css` — the v4-native `hit-area-*` utility port. And one new thing: - `@custom-variant dark` matching v3's `darkMode: ['class', '[data-theme*='dark']']` — active on `.dark` or `[data-theme*='dark']`, on the element itself or any ancestor, with zero-specificity via `:where()`. Every app's main CSS entry now reads: @import 'tailwindcss'; @import '.../packages/config/tailwind.config.css'; @import './tailwind.config.css'; @config '.../packages/config/tailwind.config.js'; The four duplicated imports (global + three themes + hit-area) disappear from each app's entry file. The `@config` bridge stays for now; the declarative theme still lives in the JS config. The next commit will merge `tailwind.config.js` and `ui.config.js` into a single JS plugin loaded by this CSS file, at which point the `@config` line goes away. Co-Authored-By: Claude Opus 4.7 --- apps/design-system/styles/globals.css | 6 +----- apps/docs/styles/main.css | 6 +----- apps/learn/styles/globals.css | 6 +----- apps/lite-studio/app/app.css | 6 +----- apps/studio/styles/main.css | 7 +------ apps/ui-library/styles/globals.css | 7 +------ apps/www/styles/index.css | 6 +----- packages/config/tailwind.config.css | 26 ++++++++++++++++++++++++++ 8 files changed, 33 insertions(+), 37 deletions(-) create mode 100644 packages/config/tailwind.config.css diff --git a/apps/design-system/styles/globals.css b/apps/design-system/styles/globals.css index a916f9d6663..38e3daf9b4e 100644 --- a/apps/design-system/styles/globals.css +++ b/apps/design-system/styles/globals.css @@ -1,11 +1,7 @@ @import 'tailwindcss'; +@import './../../../packages/config/tailwind.config.css'; @import './tailwind.config.css'; -@import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/classic-dark.css'; -@import './../../../packages/ui/build/css/themes/light.css'; - @config '../../../packages/config/tailwind.config.js'; @import 'config/typography.css'; diff --git a/apps/docs/styles/main.css b/apps/docs/styles/main.css index 31307aead88..124c8c3599d 100644 --- a/apps/docs/styles/main.css +++ b/apps/docs/styles/main.css @@ -1,10 +1,6 @@ @import 'tailwindcss'; +@import './../../../packages/config/tailwind.config.css'; @import './tailwind.config.css'; -@import './../../../packages/config/tailwind-utilities/hit-area.css'; - -@import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/light.css'; @config '../../../packages/config/tailwind.config.js'; diff --git a/apps/learn/styles/globals.css b/apps/learn/styles/globals.css index 8f2c19c7fd4..fc8c5bcd06c 100644 --- a/apps/learn/styles/globals.css +++ b/apps/learn/styles/globals.css @@ -1,11 +1,7 @@ @import 'tailwindcss'; +@import './../../../packages/config/tailwind.config.css'; @import './tailwind.config.css'; -@import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/classic-dark.css'; -@import './../../../packages/ui/build/css/themes/light.css'; - @config '../../../packages/config/tailwind.config.js'; @layer base { diff --git a/apps/lite-studio/app/app.css b/apps/lite-studio/app/app.css index f6f77f6ae36..8361aa53e61 100644 --- a/apps/lite-studio/app/app.css +++ b/apps/lite-studio/app/app.css @@ -1,10 +1,6 @@ @import 'tailwindcss'; +@import './../../../packages/config/tailwind.config.css'; @import './tailwind.config.css'; -@import './../../../packages/config/tailwind-utilities/hit-area.css'; - -@import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/light.css'; @config '../../../packages/config/tailwind.config.js'; diff --git a/apps/studio/styles/main.css b/apps/studio/styles/main.css index 718799863d6..ae85cb3ed8c 100644 --- a/apps/studio/styles/main.css +++ b/apps/studio/styles/main.css @@ -1,11 +1,6 @@ @import 'tailwindcss'; +@import './../../../packages/config/tailwind.config.css'; @import './tailwind.config.css'; -@import './../../../packages/config/tailwind-utilities/hit-area.css'; - -@import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/light.css'; -@import './../../../packages/ui/build/css/themes/classic-dark.css'; @import 'config/typography.css'; diff --git a/apps/ui-library/styles/globals.css b/apps/ui-library/styles/globals.css index ea1e111c649..fc8c5bcd06c 100644 --- a/apps/ui-library/styles/globals.css +++ b/apps/ui-library/styles/globals.css @@ -1,11 +1,6 @@ @import 'tailwindcss'; +@import './../../../packages/config/tailwind.config.css'; @import './tailwind.config.css'; -@import './../../../packages/config/tailwind-utilities/hit-area.css'; - -@import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/classic-dark.css'; -@import './../../../packages/ui/build/css/themes/light.css'; @config '../../../packages/config/tailwind.config.js'; diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css index 5ad29211342..9483ef24232 100644 --- a/apps/www/styles/index.css +++ b/apps/www/styles/index.css @@ -1,10 +1,6 @@ @import 'tailwindcss'; +@import './../../../packages/config/tailwind.config.css'; @import './tailwind.config.css'; -@import './../../../packages/config/tailwind-utilities/hit-area.css'; - -@import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/light.css'; @config '../../../packages/config/tailwind.config.js'; diff --git a/packages/config/tailwind.config.css b/packages/config/tailwind.config.css new file mode 100644 index 00000000000..e9f2c1e0ae6 --- /dev/null +++ b/packages/config/tailwind.config.css @@ -0,0 +1,26 @@ +/* + * Shared Tailwind v4 config for all Supabase apps. + * + * This file is the CSS-first orchestration layer. The imperative theme + * configuration (colors, typography, keyframes, custom plugins, etc.) still + * lives in the sibling `tailwind.config.js` and is loaded via the `@config` + * directive from each app's main CSS entry. That will migrate here in a + * follow-up commit. + */ + +/* Core CSS variable definitions for the Supabase design system. Defines + * --foreground-*, --background-*, --border-*, etc. */ +@import '../ui/build/css/source/global.css'; + +/* Per-mode overrides for the CSS variables above. */ +@import '../ui/build/css/themes/dark.css'; +@import '../ui/build/css/themes/light.css'; +@import '../ui/build/css/themes/classic-dark.css'; + +/* v4-native port of the custom `hit-area-*` utilities (from bazza.dev). */ +@import './tailwind-utilities/hit-area.css'; + +/* Dark mode: matches v3's `darkMode: ['class', '[data-theme*="dark"]']` — + * activates on `.dark` or `[data-theme*='dark']`, on the element itself + * or any ancestor. `:where()` keeps specificity at 0. */ +@custom-variant dark (&:where(.dark, .dark *, [data-theme*='dark'], [data-theme*='dark'] *));