From af897e7dd46bf50b3907b0007e0e1c16c26882b1 Mon Sep 17 00:00:00 2001
From: Arthur Abeilice <afa7789@gmail.com>
Date: Mon, 4 May 2026 20:32:24 -0300
Subject: [PATCH] feat: add Tailwind CSS reference to multiple components for
 styling consistency

---
 src/components/BuyerSteps/BuyConfirmedComponent.vue  | 1 +
 src/components/BuyerSteps/BuyerSearchComponent.vue   | 1 +
 src/components/BuyerSteps/QrCodeComponent.vue        | 1 +
 src/components/Explorer/AnalyticsCard.vue            | 1 +
 src/components/ListingComponent/BalanceCard.vue      | 1 +
 src/components/ListingComponent/TransactionCard.vue  | 1 +
 src/components/SellerSteps/SellerComponent.vue       | 1 +
 src/components/SellerSteps/SellerSearchComponent.vue | 1 +
 src/components/SellerSteps/SendNetwork.vue           | 1 +
 src/components/TopBar/TopBar.vue                     | 1 +
 src/components/ui/AmountInput.vue                    | 1 +
 src/components/ui/BankSelector.vue                   | 1 +
 src/components/ui/CustomButton.vue                   | 1 +
 src/components/ui/Dropdown.vue                       | 1 +
 src/components/ui/ErrorMessage.vue                   | 1 +
 src/components/ui/FormCard.vue                       | 1 +
 src/components/ui/IconButton.vue                     | 1 +
 src/components/ui/InfoTooltip.vue                    | 1 +
 src/components/ui/LoadingComponent.vue               | 1 +
 src/components/ui/LoadingState.vue                   | 1 +
 src/components/ui/NetworkBadges.vue                  | 1 +
 src/components/ui/PageHeader.vue                     | 1 +
 src/components/ui/StatusBadge.vue                    | 1 +
 src/components/ui/WalletConnectButton.vue            | 1 +
 src/views/FaqView.vue                                | 1 +
 src/views/ManageBidsView.vue                         | 1 +
 src/views/VersionsView.vue                           | 1 +
 27 files changed, 27 insertions(+)

diff --git a/src/components/BuyerSteps/BuyConfirmedComponent.vue b/src/components/BuyerSteps/BuyConfirmedComponent.vue
index 2153b02..f2cc175 100644
--- a/src/components/BuyerSteps/BuyConfirmedComponent.vue
+++ b/src/components/BuyerSteps/BuyConfirmedComponent.vue
@@ -132,6 +132,7 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .page {
   @apply flex flex-col items-center justify-center w-full mt-16;
 }
diff --git a/src/components/BuyerSteps/BuyerSearchComponent.vue b/src/components/BuyerSteps/BuyerSearchComponent.vue
index 6f0c368..bf3436f 100644
--- a/src/components/BuyerSteps/BuyerSearchComponent.vue
+++ b/src/components/BuyerSteps/BuyerSearchComponent.vue
@@ -417,6 +417,7 @@ const handleSubmit = async (e: Event): Promise<void> => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .custom-divide {
   width: 100%;
   border-bottom: 1px solid #d1d5db;
diff --git a/src/components/BuyerSteps/QrCodeComponent.vue b/src/components/BuyerSteps/QrCodeComponent.vue
index 47592f0..515940e 100644
--- a/src/components/BuyerSteps/QrCodeComponent.vue
+++ b/src/components/BuyerSteps/QrCodeComponent.vue
@@ -219,6 +219,7 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .page {
   @apply flex flex-col items-center justify-center w-full mt-16;
 }
diff --git a/src/components/Explorer/AnalyticsCard.vue b/src/components/Explorer/AnalyticsCard.vue
index 77ebf8e..c367407 100644
--- a/src/components/Explorer/AnalyticsCard.vue
+++ b/src/components/Explorer/AnalyticsCard.vue
@@ -37,6 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .analytics-card {
   @apply bg-white rounded-lg border border-gray-200 p-6 flex items-center justify-between shadow-lg;
 }
diff --git a/src/components/ListingComponent/BalanceCard.vue b/src/components/ListingComponent/BalanceCard.vue
index 034a420..a421d49 100644
--- a/src/components/ListingComponent/BalanceCard.vue
+++ b/src/components/ListingComponent/BalanceCard.vue
@@ -185,6 +185,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 p {
   @apply text-gray-900;
 }
diff --git a/src/components/ListingComponent/TransactionCard.vue b/src/components/ListingComponent/TransactionCard.vue
index 44d1aa9..ca21dd5 100644
--- a/src/components/ListingComponent/TransactionCard.vue
+++ b/src/components/ListingComponent/TransactionCard.vue
@@ -131,6 +131,7 @@ const handleExplorerClick = () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .item-container {
   @apply flex justify-between items-center;
 }
diff --git a/src/components/SellerSteps/SellerComponent.vue b/src/components/SellerSteps/SellerComponent.vue
index dcd4d54..e7edb18 100644
--- a/src/components/SellerSteps/SellerComponent.vue
+++ b/src/components/SellerSteps/SellerComponent.vue
@@ -305,6 +305,7 @@ const handleSelectedToken = (token: TokenEnum): void => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .custom-divide {
   width: 100%;
   border-bottom: 1px solid #d1d5db;
diff --git a/src/components/SellerSteps/SellerSearchComponent.vue b/src/components/SellerSteps/SellerSearchComponent.vue
index 7ae5f97..4c851ee 100644
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -129,6 +129,7 @@ const handleInputEvent = (event: any): void => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .custom-divide {
   width: 100%;
   border-bottom: 1px solid #d1d5db;
diff --git a/src/components/SellerSteps/SendNetwork.vue b/src/components/SellerSteps/SendNetwork.vue
index b2e5415..5964179 100644
--- a/src/components/SellerSteps/SendNetwork.vue
+++ b/src/components/SellerSteps/SendNetwork.vue
@@ -59,6 +59,7 @@ const props = defineProps({
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .page {
   @apply flex flex-col items-center justify-center w-full mt-16;
 }
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 2fde529..8426771 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -600,6 +600,7 @@ const handleMenuOptionClick = (option: MenuOption): void => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 header {
   @apply flex flex-row justify-between w-full items-center;
 }
diff --git a/src/components/ui/AmountInput.vue b/src/components/ui/AmountInput.vue
index 0503170..96a6c8e 100644
--- a/src/components/ui/AmountInput.vue
+++ b/src/components/ui/AmountInput.vue
@@ -161,6 +161,7 @@ watch(
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .amount-input-container {
   @apply flex flex-col w-full gap-2;
 }
diff --git a/src/components/ui/BankSelector.vue b/src/components/ui/BankSelector.vue
index d1582a5..7c06899 100644
--- a/src/components/ui/BankSelector.vue
+++ b/src/components/ui/BankSelector.vue
@@ -91,6 +91,7 @@ const selectBank = (bank: Bank) => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .bank-selector {
   @apply relative w-full;
 }
diff --git a/src/components/ui/CustomButton.vue b/src/components/ui/CustomButton.vue
index bc4211f..f2ab698 100644
--- a/src/components/ui/CustomButton.vue
+++ b/src/components/ui/CustomButton.vue
@@ -64,6 +64,7 @@ const handleClick = () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .button {
   @apply rounded-lg font-semibold transition-all duration-200 cursor-pointer flex items-center justify-center gap-2;
 }
diff --git a/src/components/ui/Dropdown.vue b/src/components/ui/Dropdown.vue
index f0fe68d..9696d89 100644
--- a/src/components/ui/Dropdown.vue
+++ b/src/components/ui/Dropdown.vue
@@ -143,6 +143,7 @@ onClickOutside(dropdownRef, () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .dropdown-container {
   @apply relative inline-block;
 }
diff --git a/src/components/ui/ErrorMessage.vue b/src/components/ui/ErrorMessage.vue
index e3a91f7..ae8837b 100644
--- a/src/components/ui/ErrorMessage.vue
+++ b/src/components/ui/ErrorMessage.vue
@@ -32,6 +32,7 @@ const colorClasses = {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .error-message-container {
   @apply flex w-full;
 }
diff --git a/src/components/ui/FormCard.vue b/src/components/ui/FormCard.vue
index cb36d91..5e10846 100644
--- a/src/components/ui/FormCard.vue
+++ b/src/components/ui/FormCard.vue
@@ -28,6 +28,7 @@ const props = withDefaults(
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .form-card {
   @apply flex flex-col bg-white rounded-lg;
 }
diff --git a/src/components/ui/IconButton.vue b/src/components/ui/IconButton.vue
index 7552b22..e9fe7d6 100644
--- a/src/components/ui/IconButton.vue
+++ b/src/components/ui/IconButton.vue
@@ -62,6 +62,7 @@ const handleClick = () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .icon-button {
   @apply flex items-center justify-center gap-2 font-medium rounded-lg transition-all duration-200 cursor-pointer;
 }
diff --git a/src/components/ui/InfoTooltip.vue b/src/components/ui/InfoTooltip.vue
index 033a453..c85415f 100644
--- a/src/components/ui/InfoTooltip.vue
+++ b/src/components/ui/InfoTooltip.vue
@@ -75,6 +75,7 @@ const toggleTooltip = () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .info-tooltip-container {
   @apply relative inline-block;
 }
diff --git a/src/components/ui/LoadingComponent.vue b/src/components/ui/LoadingComponent.vue
index 14e1c31..102fa19 100644
--- a/src/components/ui/LoadingComponent.vue
+++ b/src/components/ui/LoadingComponent.vue
@@ -38,6 +38,7 @@ const props = defineProps({
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .custom-divide {
   width: 100%;
   border-bottom: 1px solid #d1d5db;
diff --git a/src/components/ui/LoadingState.vue b/src/components/ui/LoadingState.vue
index 1cb55b6..42061c7 100644
--- a/src/components/ui/LoadingState.vue
+++ b/src/components/ui/LoadingState.vue
@@ -36,6 +36,7 @@ const sizeMap = {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .loading-state {
   @apply flex items-center gap-2;
 }
diff --git a/src/components/ui/NetworkBadges.vue b/src/components/ui/NetworkBadges.vue
index 9dcf163..de947b8 100644
--- a/src/components/ui/NetworkBadges.vue
+++ b/src/components/ui/NetworkBadges.vue
@@ -53,6 +53,7 @@ const networkData = computed(() => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .network-badges {
   @apply flex gap-2 items-center;
 }
diff --git a/src/components/ui/PageHeader.vue b/src/components/ui/PageHeader.vue
index 707d425..0c20262 100644
--- a/src/components/ui/PageHeader.vue
+++ b/src/components/ui/PageHeader.vue
@@ -28,6 +28,7 @@ const props = withDefaults(
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .page-header {
   @apply flex flex-col gap-4;
 }
diff --git a/src/components/ui/StatusBadge.vue b/src/components/ui/StatusBadge.vue
index 49a1a2c..360d922 100644
--- a/src/components/ui/StatusBadge.vue
+++ b/src/components/ui/StatusBadge.vue
@@ -43,6 +43,7 @@ const displayText = computed(() => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .status-badge {
   @apply text-xs sm:text-base font-medium text-gray-900 rounded-lg text-center px-2 py-1;
 }
diff --git a/src/components/ui/WalletConnectButton.vue b/src/components/ui/WalletConnectButton.vue
index e1b524a..8ad7ca2 100644
--- a/src/components/ui/WalletConnectButton.vue
+++ b/src/components/ui/WalletConnectButton.vue
@@ -102,6 +102,7 @@ onClickOutside(menuRef, () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .wallet-connect-container {
   @apply relative inline-block;
 }
diff --git a/src/views/FaqView.vue b/src/views/FaqView.vue
index fb0b465..b13e815 100644
--- a/src/views/FaqView.vue
+++ b/src/views/FaqView.vue
@@ -83,6 +83,7 @@ const openItem = (index: number) => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .page {
   @apply flex flex-col items-center justify-center w-full mt-8 sm:mt-16 px-4;
 }
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index ac404da..a1ea80d 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -119,6 +119,7 @@ watch(network, async () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .page {
   @apply flex flex-col items-center gap-10 mt-20 w-full;
 }
diff --git a/src/views/VersionsView.vue b/src/views/VersionsView.vue
index a92f62c..b128d3a 100644
--- a/src/views/VersionsView.vue
+++ b/src/views/VersionsView.vue
@@ -84,6 +84,7 @@ const formatDate = (dateString: string): string => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .page {
   @apply flex flex-col items-center justify-center w-full mt-16 px-4;
 }