feat(extension-sdk): provide default tailwind config

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

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 classes need to be prefixed via `ext:` in extensions to avoid style conflicts.
+
+```ts
+import '@opencloud-eu/extension-sdk/tailwind.css'
+```

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;
+}