tailwind c ss

ui-kit/package.json

@@ -6,11 +6,16 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "css:build": "tailwindcss -c tailwind.config.cjs -i ./styles/tailwind.css -o ../web/static/css/app.css --minify",
+    "css:dev": "tailwindcss -c tailwind.config.cjs -i ./styles/tailwind.css -o ../web/static/css/app.css --watch"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
     "svelte": "^5.0.0",
+    "tailwindcss": "^3.4.13",
     "typescript": "^5.6.0",
     "vite": "^5.4.0"
   }

ui-kit/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

ui-kit/styles/tailwind.css

@@ -0,0 +1,31 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply m-0 bg-slate-100 text-slate-800;
+  }
+
+  a {
+    @apply text-slate-800;
+  }
+}
+
+@layer components {
+  .row {
+    @apply flex flex-wrap gap-2;
+  }
+
+  .muted {
+    @apply text-sm text-slate-500;
+  }
+
+  .btn-primary {
+    @apply rounded-lg bg-slate-900 px-4 py-2 text-white hover:bg-slate-700;
+  }
+
+  .input-base {
+    @apply rounded-lg border border-slate-300 px-3 py-2;
+  }
+}

ui-kit/tailwind.config.cjs

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{svelte,ts,js}',
+    '../web/templates/**/*.html'
+  ],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

ui-kit/vite.config.ts

@@ -16,8 +16,17 @@ export default defineConfig({
     lib: {
       entry: 'src/index.ts',
       formats: ['es'],
-      fileName: () => 'ui.esm.js',
-      cssFileName: 'ui'
+      fileName: () => 'ui.esm.js'
+    },
+    rollupOptions: {
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') {
+            return 'ui.css';
+          }
+          return '[name][extname]';
+        }
+      }
     }
   }
 });