@opencloud-eu/extension-sdk 4.0.0 → 4.1.0-alpha.2

package/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'
+```

package/index.mjs

@@ -6,6 +6,7 @@ import { mergeConfig, searchForWorkspaceRoot } from 'vite'
 import { join } from 'path'
 import { cwd } from 'process'
 import { readFileSync, existsSync } from 'fs'
+import tailwindcss from '@tailwindcss/vite'
 
 import vue from '@vitejs/plugin-vue'
 
@@ -140,7 +141,8 @@ export const defineConfig = (overrides = {}) => {
             customElement: false,
             ...(isTesting && { template: { compilerOptions: { whitespace: 'preserve' } } })
           }),
-          manifestPlugin()
+          manifestPlugin(),
+          tailwindcss()
         ],
         test: {
           globals: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloud-eu/extension-sdk",
-  "version": "4.0.0",
+  "version": "4.1.0-alpha.2",
   "description": "OpenCloud Web Extension SDK",
   "license": "AGPL-3.0",
   "main": "index.mjs",
@@ -14,10 +14,10 @@
     "directory": "packages/extension-sdk"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.11",
     "@vitejs/plugin-vue": "^6.0.0"
   },
   "peerDependencies": {
-    "vite": "^5 || ^6.0.0 || ^7.0.0",
-    "sass": "^1.79.5"
+    "vite": "^5 || ^6.0.0 || ^7.0.0"
   }
 }

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