tailwind test

.gitignore

@@ -4,3 +4,4 @@ node_modules
 public/main.js
 lib/nostr-relay-inspector
 dist
+yarn-error.log

package.json

@@ -18,6 +18,8 @@
   },
   "dependencies": {
     "@2alheure/vue-safe-mail": "1.0.3",
+    "@headlessui/vue": "1.7.7",
+    "@heroicons/vue": "2.0.13",
     "@vue-leaflet/vue-leaflet": "0.6.1",
     "@vueuse/core": "9.9.0",
     "alby": "1.0.1",
@@ -53,6 +55,7 @@
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
     "@babel/plugin-syntax-top-level-await": "7.14.5",
+    "@tailwindcss/forms": "0.5.3",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",

postcss.config.js

@@ -1,7 +1,6 @@
-const tailwindcss = require('tailwindcss');
 module.exports = {   
-  plugins: [
-    'postcss-preset-env',
-    tailwindcss
-  ],
-};
+  plugins: {     
+     tailwindcss: {},     
+     autoprefixer: {},   
+  }
+}

src/components/NavComponent.vue

@@ -42,11 +42,15 @@ nav.menu a:hover {
 }
 
 </style>
+
 <script>
 import { defineComponent } from 'vue'
 import PreferencesComponent from '../components/PreferencesComponent.vue'
 import AuthComponent from '../components/AuthComponent.vue'
 
+
+
+
 export default defineComponent({
   title: "nostr.watch registry & network status",
   name: 'NavComponent',

src/router/index.js

@@ -3,22 +3,19 @@ import { createRouter, createWebHistory } from 'vue-router'
 import HomePage from '../pages/HomePage.vue'
 // import ByStatus from '../pages/ByStatus.vue'
 import SingleRelay from '../pages/SingleRelay.vue'
+import TailwindTest from '../pages/TailwindTest.vue'
 
 const routes = [
+    {
+        path: '/tw',
+        component: TailwindTest
+    },
     {
         path: '/relay/:relayUrl(.*)',
-        // name: 'nostr.watch - :relayUrl',
         component: SingleRelay
     },
-    // {
-    //     path: '/availability',
-    //     // name: 'nostr.watch',
-    //     component: ByStatus
-    // },
-    //  Added our new route file named profile.vue
     {
         path: '/',
-        // name: 'nostr.watch',
         component: HomePage
     },
     

src/styles/main.scss

@@ -1,7 +1,7 @@
 @import "./components/tooltip.scss";
-// @tailwind base;
-// @tailwind components;
-// @tailwind utilities;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 td ul { padding:0; margin:0; list-style: none; }
 td ul li { list-style: none; }

tailwind.config.js

@@ -1,11 +1,16 @@
 module.exports = {
-    content: ['./dist/*.html'],
+    content: [
+      "./index.html",     
+      "./src/**/*.{vue,js,ts,jsx,tsx}"
+    ],
     theme: {
       extend: {},
     },
     variants: {
       extend: {},
     },
-    plugins: [],
+    plugins: [
+      require('@tailwindcss/forms'),
+    ],
   }