Try to use tailwind

web/src/dialogs/NewBudget.vue

@@ -1,75 +1,40 @@
-<script>import { NEW_BUDGET } from "../store/action-types";
+<script lang="ts">
+import { defineComponent } from "vue";
+import { NEW_BUDGET } from "../store/action-types";
 
-  export default {
-    data () {
-      return {
-        dialog: false,
-        budgetName: ""
-      }
+export default defineComponent({
+  data() {
+    return {
+      dialog: false,
+      budgetName: ""
+    }
+  },
+  methods: {
+    saveBudget() {
+      this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
+      this.$data.dialog = false;
     },
-    methods: {
-      saveBudget () {
-        this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
-        this.$data.dialog = false;
-      },
-      newBudget () {
-        this.$data.dialog = true;
-      }
+    newBudget() {
+      this.$data.dialog = true;
     }
   }
-
+})
 </script>
 
 <template>
-  <v-row justify="center">
-    <v-dialog
-      v-model="dialog"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn
-          color="primary"
-          dark
-          v-bind="attrs"
-          @click="newBudget"
-        >
-          New Budget
-        </v-btn>
-      </template>
-      <v-card>
-        <v-card-title>
-          <span class="text-h5">New Budget</span>
-        </v-card-title>
-        <v-card-text>
-          <v-container>
-            <v-row>
-              <v-col>
-                <v-text-field
-                  v-model="budgetName"
-                  label="Budget name"
-                  required
-                ></v-text-field>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn
-            color="blue darken-1"
-            text
-            @click="dialog = false"
-          >
-            Close
-          </v-btn>
-          <v-btn
-            color="blue darken-1"
-            text
-            @click="saveBudget"
-          >
-            Save
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-  </v-row>
+  <button color="primary" dark @click="newBudget">New Budget</button>
+  <div v-if="dialog" justify="center">
+    <div>
+      <div>
+        <span class="text-h5">New Budget</span>
+      </div>
+      <div>
+        <input type="text" v-model="budgetName" label="Budget name" required />
+      </div>
+      <div>
+        <button color="blue darken-1" text @click="dialog = false">Close</button>
+        <button color="blue darken-1" text @click="saveBudget">Save</button>
+      </div>
+    </div>
+  </div>
 </template>