Feature/tailwind v4 migration

includes/Admin/Dashboard/Dashboard.php

@@ -483,7 +483,7 @@ protected function register_setup_guide_scripts() {
             wp_register_style(
                 $this->setup_guide_key,
                 DOKAN_PLUGIN_ASSEST . '/css/setup-guide-banner.css',
-                [],
+                [ 'dokan-tailwind' ],
                 $version
             );
 
@@ -644,7 +644,9 @@ public function add_switching_container( $text ) {
             return $text;
         }
 
-        $dom_element = '<span id="dokan-admin-switching" class="dokan-layout dokan-admin-page-body"></span><br/>';
+        $dom_element = '<span id="dokan-admin-switching" class="dokan-layout dokan-admin-page-body"></span><br/>
+        <span id="footer-thankyou">If you like <strong>Dokan</strong> please leave us a <a href="https://wordpress.org/support/plugin/dokan-lite/reviews?rate=5#new-post" target="_blank" class="wc-rating-link" aria-label="five star" data-rated="Thanks :)">★★★★★</a> rating. A huge thanks in advance!</span>
+        ';
 
         return $dom_element;
     }

includes/Assets.php

@@ -79,7 +79,7 @@ public function enqueue_admin_scripts( $hook ) {
         if ( 'toplevel_page_dokan' === $hook ) {
             $localize_script           = $this->get_admin_localized_scripts();
             $vue_admin_localize_script = $this->get_vue_admin_localized_scripts();
-
+            wp_enqueue_style( 'dokan-tailwind' );
             // Load common styles and scripts
             wp_enqueue_script( 'dokan-tinymce' );
             wp_enqueue_style( 'dokan-admin-css' );

includes/Intelligence/Assets.php

@@ -26,13 +26,6 @@ public function register_all_scripts() {
         }
         $asset = include $asset;
 
-        wp_register_style(
-            'dokan-ai-style',
-            DOKAN_PLUGIN_ASSEST . '/css/dokan-intelligence.css',
-            [ 'dokan-react-components', 'dokan-react-frontend' ],
-            $asset['version']
-        );
-
         wp_register_script(
             'dokan-ai-script',
             DOKAN_PLUGIN_ASSEST . '/js/dokan-intelligence.js',
@@ -53,7 +46,6 @@ public function enqueue_ai_assets() {
             return;
         }
 
-        wp_enqueue_style( 'dokan-ai-style' );
         wp_enqueue_script( 'dokan-ai-script' );
         wp_set_script_translations( 'dokan-ai-script', 'dokan-lite' );
     }

package.json

@@ -29,12 +29,12 @@
   },
   "devDependencies": {
     "@automattic/color-studio": "^2.5.0",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/typography": "^0.5.15",
     "@wordpress/dependency-extraction-webpack-plugin": "^6.32.0",
-    "@wordpress/scripts": "^30.25.0",
     "@wordpress/env": "^10.26.0",
+    "@wordpress/scripts": "^30.25.0",
     "chartjs-adapter-moment": "^1.0.1",
     "debounce": "^1.2.1",
     "eslint-import-resolver-typescript": "^3.7.0",
@@ -49,8 +49,7 @@
     "replace-in-file": "^6.3.5",
     "tailwind-merge": "^2.6.0",
     "tailwind-scrollbar-hide": "^4.0.0",
-    "tailwindcss": "^3.3.3",
-    "tailwindcss-scoped-preflight": "^3.4.5",
+    "tailwindcss": "^4.1.18",
     "vue": "^2.7.14",
     "vue-chartjs": "^3.5.1",
     "vue-color": "^2.8.1",

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  }
-}
+    plugins: {
+        '@tailwindcss/postcss': {},
+    },
+};

src/ProFeatures/tailwind.scss

@@ -1,4 +1,2 @@
-@use '../base-tailwind';
-@config './tailwind.config.js';
-
-//@import "@getdokan/dokan-ui/dist/dokan-ui.css";
+/* Module-specific styles - Tailwind loaded via dokan-tailwind bundle */
+/* No custom styles for this module */

src/Status/status.scss

@@ -1,3 +1,2 @@
-@use '../base-tailwind';
-@config './status-tailwind.config.js';
-//@import "@getdokan/dokan-ui/dist/dokan-ui.css";
+/* Module-specific styles - Tailwind loaded via dokan-tailwind bundle */
+/* No custom styles for this module */

src/admin/banner/tailwind.scss

@@ -1,3 +0,0 @@
-@import '@getdokan/dokan-ui/dist/dokan-ui.css';
-@config './dashboard-banner-tailwind.config.js';
-@import './../../base-tailwind';

src/admin/components/Commission/style.css

@@ -1,4 +1,2 @@
-@config './tailwind-category-commission.config.js';
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/* Module-specific styles - Tailwind loaded via dokan-tailwind bundle */
+/* No custom styles for this module */

src/admin/dashboard/pages/dashboard/tailwind.scss

@@ -1,5 +1,4 @@
-@use '../../../../base-tailwind';
-@config './tailwind.config.js';
+/* Module-specific styles - Tailwind loaded via dokan-tailwind bundle */
 
 // Hide the notice list.
 #dokan__notice-list {

src/admin/dashboard/style.scss

@@ -1,5 +1,4 @@
-@use '../../base-tailwind';
-@config './admin-dashboard-tailwind.config.js';
+/* Module-specific styles - Tailwind loaded via dokan-tailwind bundle */
 // Define custom animation keyframes
 
 @keyframes completeStep {
@@ -14,9 +13,9 @@
 .animate-complete-step {
     animation: completeStep 0.9s ease-in-out;
 }
- .dokan-lite-module-select-category-popover {
-     @apply top-5 !important;
- }
+.dokan-lite-module-select-category-popover {
+    top: 1.25rem !important;
+}
 
 #dokan-admin-dashboard {
     .dokan-dashboard-datatable {
@@ -49,10 +48,10 @@
     }
 
     table.dataviews-view-table {
-        border: 1px solid #E9E9E9;
+        border: 1px solid #e9e9e9;
         th {
             background-color: #f9fafb;
-            border-bottom: 1px solid #E9E9E9;
+            border-bottom: 1px solid #e9e9e9;
             border-top-left-radius: 3px;
             border-top-right-radius: 3px;
         }

src/admin/header/tailwind.scss

@@ -1,2 +1,2 @@
-@use '../../base-tailwind';
-@config './header-tailwind.config.js';
+/* Module-specific styles - Tailwind loaded via dokan-tailwind bundle */
+/* No custom styles for this module */

src/admin/onboard/tailwind.scss

@@ -1,6 +1,5 @@
+/* Module-specific styles - Tailwind loaded via dokan-tailwind bundle */
 @import '@getdokan/dokan-ui/dist/dokan-ui.css';
-@config './onboard-tailwind.config.js';
-@import './../../base-tailwind';
 
 .dokan-admin-setup-wizard {
     margin: 0;

src/admin/panel-switcher/tailwind.scss

@@ -1,2 +1,2 @@
-@config './panel-switcher-tailwind.config.js';
-@import './../../base-tailwind';
+/* Module-specific styles - Tailwind loaded via dokan-tailwind bundle */
+/* No custom styles for this module */

src/base-tailwind.css

@@ -0,0 +1,95 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+/* ============================================
+   Tailwind v4 Theme Configuration
+   Simplified color system with CSS variable support
+   ============================================ */
+@theme {
+    /* Custom breakpoints */
+    --breakpoint-d-xs: 360px;
+
+    /* Primary Colors - Single source of truth */
+    --color-primary: var(--dokan-primary-color, #7047eb);
+    --color-primary-hover: var(--dokan-primary-hover-color, #502bbf);
+    --color-primary-light: var(--dokan-primary-light-color, #daceff);
+    --color-primary-dark: var(--dokan-primary-dark-color, #322067);
+
+    /* Text colors on colored backgrounds (for contrast) */
+    --color-on-primary: var(--dokan-on-primary-color, #ffffff);
+    --color-on-info: var(--dokan-on-info-color, #ffffff);
+    --color-on-success: var(--dokan-on-success-color, #ffffff);
+    --color-on-warning: var(--dokan-on-warning-color, #ffffff);
+    --color-on-danger: var(--dokan-on-danger-color, #ffffff);
+
+    /* Neutral Colors */
+    --color-neutral-50: #fafafa;
+    --color-neutral-100: #f5f5f5;
+    --color-neutral-200: #e5e5e5;
+    --color-neutral-300: #d4d4d4;
+    --color-neutral-400: #a3a3a3;
+    --color-neutral-500: #737373;
+    --color-neutral-600: #525252;
+    --color-neutral-700: #404040;
+    --color-neutral-800: #262626;
+    --color-neutral-900: #171717;
+
+    /* Border Colors */
+    --color-border: var(--dokan-border-color, #e5e5e5);
+    --color-border-light: var(--dokan-border-light-color, #f5f5f5);
+    --color-border-dark: var(--dokan-border-dark-color, #d4d4d4);
+
+    /* Semantic Colors */
+    --color-info: #0b76b7;
+    --color-info-light: #e9f9ff;
+    --color-info-hover: #2795d7;
+
+    --color-success: #07a67e;
+    --color-success-light: #daf8e6;
+    --color-success-hover: #11b68c;
+
+    --color-warning: #e9a905;
+    --color-warning-light: #fffbeb;
+    --color-warning-hover: #fbbf24;
+
+    --color-danger: #e3050c;
+    --color-danger-light: #fef3f3;
+    --color-danger-hover: #f23030;
+
+    /* Sidebar Colors */
+    --color-sidebar: var(--dokan-sidebar-bg, #322067);
+    --color-sidebar-hover: var(--dokan-sidebar-hover-bg, #7047eb);
+    --color-sidebar-text: var(--dokan-sidebar-text, #daceff);
+    --color-sidebar-text-hover: var(--dokan-sidebar-text-hover, #ffffff);
+}
+
+/* Base layer styles */
+@layer base {
+    :root {
+        --colors-primary-500: var(--color-primary);
+        --wp-components-color-accent: var(--color-primary);
+        --wp-components-color-accent-darker-20: var(--color-primary-hover);
+    }
+
+    /* Headless UI portal visibility fix */
+    #headlessui-portal-root {
+        display: none;
+    }
+
+    /* Z-index for popover/modal layers */
+    div[data-radix-popper-content-wrapper],
+    div[data-headlessui-state="open"][role="dialog"] {
+        z-index: 999 !important;
+    }
+}
+
+.dokan-layout {
+    @import "tailwindcss/preflight.css" layer(base);
+    @import "tailwindcss/utilities.css";
+
+    /* Import custom component styles */
+    @import './dokan-components.css';
+
+    border-color: var(--color-border);
+
+}
+@import '@getdokan/dokan-ui/dist/dokan-ui.css';