From 6d1dd4eac5397a8342224d51eb44589fe63f0fa3 Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 8 Jan 2026 07:35:56 +0700
Subject: [PATCH] fix: add @reference directive for Tailwind 4 scoped styles

Add @reference 'tailwindcss' to components using @apply in scoped styles:
- MainNavigation.vue
- SubNavigation.vue
- GlobalSearchBar.vue

Required for Tailwind CSS 4 compatibility with scoped Vue styles.
---
 app/components/navigation/MainNavigation.vue | 2 ++
 app/components/navigation/SubNavigation.vue  | 2 ++
 app/components/search/GlobalSearchBar.vue    | 2 ++
 3 files changed, 6 insertions(+)

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index 02f1dc0..c255093 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -197,6 +197,8 @@ const isActiveTab = (key: string) => {
 </script>
 
 <style scoped>
+@reference "tailwindcss";
+
 .tab-item {
   @apply px-4 py-2 rounded-full font-medium text-sm transition-colors;
   @apply hover:bg-base-200;
diff --git a/app/components/navigation/SubNavigation.vue b/app/components/navigation/SubNavigation.vue
index 46b4d2c..1a430fe 100644
--- a/app/components/navigation/SubNavigation.vue
+++ b/app/components/navigation/SubNavigation.vue
@@ -52,6 +52,8 @@ const isActive = (path: string) => {
 </script>
 
 <style scoped>
+@reference "tailwindcss";
+
 .subnav-item {
   @apply px-4 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap;
   @apply text-base-content/70 hover:text-base-content hover:bg-base-200;
diff --git a/app/components/search/GlobalSearchBar.vue b/app/components/search/GlobalSearchBar.vue
index f313e20..c7442f6 100644
--- a/app/components/search/GlobalSearchBar.vue
+++ b/app/components/search/GlobalSearchBar.vue
@@ -209,6 +209,8 @@ onMounted(() => {
 </script>
 
 <style scoped>
+@reference "tailwindcss";
+
 .search-field {
   @apply flex flex-col px-4 py-2 min-w-32;
 }