From 47b9912085ce6ef68c40b62683eda9d065b01e7d Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Mon, 29 Sep 2025 09:52:54 +0200 Subject: [PATCH 1/3] feat(extension-sdk): provide default tailwind config Adds a default tailwind config for extensions so they don't need to ship it on their own. --- packages/extension-sdk/README.md | 8 ++++++++ packages/extension-sdk/tailwind.css | 14 ++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 packages/extension-sdk/tailwind.css diff --git a/packages/extension-sdk/README.md b/packages/extension-sdk/README.md index d0717d98c0..dbc1a480bc 100644 --- a/packages/extension-sdk/README.md +++ b/packages/extension-sdk/README.md @@ -37,3 +37,11 @@ export default defineConfig({ } }) ``` + +### Tailwind CSS + +The extension-sdk comes with a preconfigured Tailwind CSS setup for extension development. To use it, simply import the provided CSS file in your main application file. Note that Tailwind styles need to be prefixed via `ext:` in extensions to avoid style conflicts. + +```ts +import '@opencloud-eu/extension-sdk/tailwind.css' +``` diff --git a/packages/extension-sdk/tailwind.css b/packages/extension-sdk/tailwind.css new file mode 100644 index 0000000000..2272b99c82 --- /dev/null +++ b/packages/extension-sdk/tailwind.css @@ -0,0 +1,14 @@ +@layer theme, base, components, utilities; +@import 'tailwindcss/theme.css' layer(theme) prefix(ext); +@import 'tailwindcss/utilities.css' layer(utilities) prefix(ext); + +@theme { + --font-sans: var(--oc-font-family); + + --spacing: 4px; + --breakpoint-xs: 580px; + --breakpoint-sm: 640px; + --breakpoint-md: 960px; + --breakpoint-lg: 1200px; + --breakpoint-xl: 1600px; +} From 886bb1e24b9775a8c3dd1c20699090bb1c3db764 Mon Sep 17 00:00:00 2001 From: Jannik Stehle Date: Mon, 29 Sep 2025 09:58:18 +0200 Subject: [PATCH 2/3] docs(design-system): add note for tailwind default config --- .../design-system/docs/gettingStarted/tailwindMigration.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/design-system/docs/gettingStarted/tailwindMigration.md b/packages/design-system/docs/gettingStarted/tailwindMigration.md index 4166f4f60c..13e9b91fc2 100644 --- a/packages/design-system/docs/gettingStarted/tailwindMigration.md +++ b/packages/design-system/docs/gettingStarted/tailwindMigration.md @@ -9,6 +9,9 @@ Starting with `v4` of OpenCloud Web and the design-system, the custom utility cl The following guide shows how to migrate your application or extension to `v4` of OpenCloud Web and its design-system. +> [!NOTE] +> When using Tailwind classes within a Web extension, it's recommended to use the Tailwind default config provided by the extension-sdk via `@opencloud-eu/extension-sdk/tailwind.css`. This however requires you to prefix all Tailwind classes with `ext:` to avoid style conflicts. + ## Utility classes ### Spacing From 89586c0785735d6e595f72e883d90a088c41618e Mon Sep 17 00:00:00 2001 From: Jannik Stehle <50302941+JammingBen@users.noreply.github.com> Date: Mon, 29 Sep 2025 14:38:44 +0200 Subject: [PATCH 3/3] Update packages/extension-sdk/README.md Co-authored-by: Benedikt Kulmann --- packages/extension-sdk/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extension-sdk/README.md b/packages/extension-sdk/README.md index dbc1a480bc..76a2e99d5b 100644 --- a/packages/extension-sdk/README.md +++ b/packages/extension-sdk/README.md @@ -40,7 +40,7 @@ export default defineConfig({ ### Tailwind CSS -The extension-sdk comes with a preconfigured Tailwind CSS setup for extension development. To use it, simply import the provided CSS file in your main application file. Note that Tailwind styles need to be prefixed via `ext:` in extensions to avoid style conflicts. +The extension-sdk comes with a preconfigured Tailwind CSS setup for extension development. To use it, simply import the provided CSS file in your main application file. Note that Tailwind classes need to be prefixed via `ext:` in extensions to avoid style conflicts. ```ts import '@opencloud-eu/extension-sdk/tailwind.css'