setup tailwind

package.json

@@ -4,25 +4,29 @@
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {
-		"dev": "vite",
+		"dev": "npm run build && concurrently 'npm:build:watch' 'npm:preview'",
 		"build": "vite build",
 		"preview": "vite preview --port 50713",
-		"build:watch": "npm run build && concurrently 'npm:_build:watch' 'npm:preview'",
-		"_build:watch": "NODE_ENV=development vite build --watch",
+		"build:watch": "NODE_ENV=development vite build --watch",
 		"check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json",
 		"postinstall": "mkdir -p dist"
 	},
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tsconfig/svelte": "^5.0.4",
+		"autoprefixer": "^10.4.20",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"tailwindcss": "^3.4.9",
 		"tslib": "^2.6.3",
 		"typescript": "^5.5.3",
 		"vite": "^5.4.4"
 	},
 	"dependencies": {
+		"@tailwindcss/container-queries": "^0.1.1",
+		"@tailwindcss/forms": "^0.5.9",
+		"@tailwindcss/typography": "^0.5.15",
 		"concurrently": "^8.2.2"
 	},
 	"packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
-}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};

src/app.css

@@ -1,3 +1,6 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 h2{
 	font-family: monospace;
-}
+}

src/plugin.svelte

@@ -9,12 +9,12 @@
 		editCount: number;
 	}
 
-	let { doc, editCount }: Props = $props();
+	// let { doc, editCount }: Props = $props();
 </script>
 
-{#if doc}
-	<h2>Welcome to oscd-io-centern</h2>
-{/if}
+
+<h2>Welcome to oscd-io-centern</h2>
+
 
 <input type="hidden" name="package-name" value={pckg.name} />
 <input type="hidden" name="package-version" value={pckg.version} />

src/plugin.ts → src/plugin.svelte.ts

@@ -1,40 +1,38 @@
 import Plugin from './plugin.svelte'
 import * as pkg from "../package.json";
 import { mount } from "svelte";
+import "./app.css";
 
 export default class NewOSCDPlugin extends HTMLElement {
+
+	private props = $state<{
+		doc: XMLDocument | undefined,
+		editCount: number,
+	}>({
+		doc: undefined,
+		editCount: -1,
+	});
 
-	private plugin?: Plugin
 
 	connectedCallback() {
 		this.attachShadow({ mode: "open" });
-		this.plugin = mount(Plugin, {
-        			target: this.shadowRoot!,
-        			props: {
-        				doc: this._doc,
-        				editCount: -1
-        			}
-        		});
-
+		mount(
+			Plugin, 
+			{ 
+				target: this.shadowRoot!,
+				// props: this.props,
+			}
+		)
 		const linkElement = createStyleLinkElement()
 		this.shadowRoot?.appendChild(linkElement)
 	}
 
-	private _doc?: XMLDocument
 	public set doc(newDoc: XMLDocument){
-		this._doc = newDoc
-		if(!this.plugin) {
-			return
-		}
-
-		this.plugin.$set({doc: newDoc})
+		this.props.doc = newDoc
 	}
 
 	public set editCount(newCount: number) {
-		if (!this.plugin) {
-			return
-		}
-		this.plugin.$set({ editCount: newCount })
+		this.props.editCount = newCount
 	}
 
 }

tailwind.config.ts

@@ -0,0 +1,14 @@
+import containerQueries from '@tailwindcss/container-queries';
+import forms from '@tailwindcss/forms';
+import typography from '@tailwindcss/typography';
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+
+  theme: {
+    extend: {}
+  },
+
+  plugins: [typography, forms, containerQueries]
+} satisfies Config;

vite.config.ts

@@ -5,11 +5,11 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 export default defineConfig({
 	plugins: [svelte()],
 	server: {
-		port: 54187,
+		port: 49678,
 	},
 	build: {
 		lib: {
-			entry:   "src/plugin.ts",
+			entry:   "src/plugin.svelte.ts",
 			fileName: "index",
 			formats: ["es"],
 		},