BorderedButtonの追加

src/components/Controls/BorderedButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const { disabled = false } = defineProps<{
+  disabled?: boolean
+  text: string
+}>()
+const emit = defineEmits(['click'])
+function onClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <button
+    :disabled="disabled"
+    class="fontstyle-ui-control-strong rounded border border-brand-primary px-6 py-1.75 text-brand-primary enabled:hover:bg-brand-light-primary disabled:opacity-50"
+    @click="onClick"
+  >
+    {{ text }}
+  </button>
+</template>
+
+<style scoped></style>

tailwind.config.js

@@ -26,6 +26,7 @@ export default {
       spacing: {
         '7.5': '1.875rem',
         '1.625': '0.40625rem',
+        '1.75': '0.4375rem',
         '4.5': '1.125rem',
         '27': '6.75rem',
         '50': '12.5rem',