Fix tailwind

index.html

@@ -5,21 +5,6 @@
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    tailwind.config = {
-      theme: {
-        extend: {
-          colors: {
-            mtw_purple: '#f817b5',
-            mtw_white_alt: '#f9f9f9',
-            mtw_white_alt2: '#f3f4ff',
-          }
-        }
-      }
-    }
-  </script>
   <title>Laa Widget</title>
 </head>
 

package.json

@@ -25,10 +25,13 @@
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
     "@vue/tsconfig": "^0.1.3",
+    "autoprefixer": "^10.4.12",
     "eslint": "^8.22.0",
     "eslint-plugin-vue": "^9.3.0",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.18",
     "prettier": "^2.7.1",
+    "tailwindcss": "^3.1.8",
     "typescript": "~4.7.4",
     "vite": "^3.0.9",
     "vue-tsc": "^0.40.7"

postcss.config.js

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

src/assets/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/widget.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import Account, { ArAccount, ArProfile } from 'arweave-account';
+import Account from 'arweave-account';
+import type { ArAccount } from 'arweave-account';
 import { run } from 'ar-gql';
 import { useAccountStore } from '@/stores/account';
 import Twitter from '@/components/icons/Twitter.vue';

src/main.ts

@@ -4,6 +4,8 @@ import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
 
+import "./assets/main.css";
+
 const app = createApp(App);
 
 app.use(createPinia());

src/stores/account.ts

@@ -1,6 +1,6 @@
-import { ref, computed, reactive } from "vue";
+import { ref, reactive } from "vue";
 import { defineStore } from "pinia";
-import { ArProfile } from 'arweave-account';
+import type { ArProfile } from "arweave-account";
 
 export const useAccountStore = defineStore("account", () => {
   const txid = ref();

src/views/IndexView.vue

@@ -4,6 +4,6 @@ import Widget from '@/components/widget.vue';
 
 <template>
   <main>
-    <Widget msg="Hello World!" />
+    <Widget />
   </main>
 </template>

tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        mtw_purple: '#f817b5',
+        mtw_white_alt: '#f9f9f9',
+        mtw_white_alt2: '#f3f4ff',
+      }
+    }
+  },
+  plugins: [
+    require("daisyui")
+  ],
+}