feat: add Tailwind CSS reference to multiple components for styling consistency

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;
 }

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;

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;
 }

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;
 }

src/components/ListingComponent/BalanceCard.vue

@@ -185,6 +185,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 p {
   @apply text-gray-900;
 }

src/components/ListingComponent/TransactionCard.vue

@@ -131,6 +131,7 @@ const handleExplorerClick = () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .item-container {
   @apply flex justify-between items-center;
 }

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;

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;

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;
 }

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;
 }

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;
 }

src/components/ui/BankSelector.vue

@@ -91,6 +91,7 @@ const selectBank = (bank: Bank) => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .bank-selector {
   @apply relative w-full;
 }

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;
 }

src/components/ui/Dropdown.vue

@@ -143,6 +143,7 @@ onClickOutside(dropdownRef, () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .dropdown-container {
   @apply relative inline-block;
 }

src/components/ui/ErrorMessage.vue

@@ -32,6 +32,7 @@ const colorClasses = {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .error-message-container {
   @apply flex w-full;
 }

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;
 }

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;
 }

src/components/ui/InfoTooltip.vue

@@ -75,6 +75,7 @@ const toggleTooltip = () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .info-tooltip-container {
   @apply relative inline-block;
 }

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;

src/components/ui/LoadingState.vue

@@ -36,6 +36,7 @@ const sizeMap = {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .loading-state {
   @apply flex items-center gap-2;
 }

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;
 }

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;
 }

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;
 }

src/components/ui/WalletConnectButton.vue

@@ -102,6 +102,7 @@ onClickOutside(menuRef, () => {
 </template>
 
 <style scoped>
+@reference "tailwindcss";
 .wallet-connect-container {
   @apply relative inline-block;
 }