Нашёл решение данного вопрос. Ответ как всегда скрывался в документации, причём я его несколько раз уже читал, и даже что то пробовал применить, но видимо этого оказалось не достаточно и ничего не работало.
Для решения данного вопроса, необходимо добавить в ГЛАВНЫЙ файл стилей ГЛОБАЛЬНЫЕ правила и стили из документации, а именно переменные которые привязаны только к vueform.
стили css выглядят так:
:root, :before, :after, * {
--vf-primary: #07bf9b;
--vf-primary-darker: #06ac8b;
--vf-danger: #ef4444;
--vf-danger-lighter: #fee2e2;
--vf-success: #10b981;
--vf-success-lighter: #d1fae5;
--vf-gray-50: #f9fafb;
--vf-gray-100: #f3f4f6;
--vf-gray-200: #e5e7eb;
--vf-gray-300: #d1d5db;
--vf-gray-400: #9ca3af;
--vf-gray-500: #6b7280;
--vf-gray-600: #4b5563;
--vf-gray-700: #374151;
--vf-gray-800: #1f2937;
--vf-gray-900: #111827;
--vf-dark-50: #f9fafb;
--vf-dark-100: #f3f4f6;
--vf-dark-200: #e5e7eb;
--vf-dark-300: #d1d5db;
--vf-dark-400: #9ca3af;
--vf-dark-500: #6b7280;
--vf-dark-600: #4b5563;
--vf-dark-700: #374151;
--vf-dark-800: #1f2937;
--vf-dark-900: #111827;
--vf-ring-color: #07bf9b66;
--vf-ring-width: 2px;
}
// и так далее, взял все переменные из документации, чтобы не париться,
// потому что их там почти 400 строчек кода.
ссылка на документацию
https://vueform.com/themes/tailwind#customization 
Средний
