add blocks

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.3.0 (2025-02-26)
+
+**Implemented New Features and Enhancements**
+
+-   Update PrimeVue version
+
 ## 4.2.0 (2024-12-09)
 
 **Implemented New Features and Enhancements**

package.json

@@ -1,6 +1,6 @@
 {
     "name": "sakai-vue",
-    "version": "4.2.0",
+    "version": "4.3.0",
     "scripts": {
         "dev": "vite",
         "build": "vite build",
@@ -8,26 +8,25 @@
         "lint": "eslint --fix . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
     },
     "dependencies": {
-        "@primevue/themes": "^4.2.4",
+        "@primeuix/themes": "^1.0.0",
         "chart.js": "3.3.2",
         "primeicons": "^7.0.0",
-        "primevue": "^4.2.4",
+        "primevue": "^4.3.1",
+        "tailwindcss-primeui": "^0.5.0",
         "vue": "^3.4.34",
         "vue-router": "^4.4.0"
     },
     "devDependencies": {
-        "@primevue/auto-import-resolver": "^4.2.4",
+        "@primevue/auto-import-resolver": "^4.3.1",
         "@rushstack/eslint-patch": "^1.8.0",
+        "@tailwindcss/vite": "^4.1.17",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vue/eslint-config-prettier": "^9.0.0",
-        "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-plugin-vue": "^9.23.0",
-        "postcss": "^8.4.40",
         "prettier": "^3.2.5",
         "sass": "^1.55.0",
-        "tailwindcss": "^3.4.6",
-        "tailwindcss-primeui": "^0.3.2",
+        "tailwindcss": "^4.1.17",
         "unplugin-vue-components": "^0.27.3",
         "vite": "^5.3.1"
     }

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {}
-    }
-};

src/assets/demo/demo.scss

@@ -1,2 +1,2 @@
 @use './code.scss';
-@import './flags/flags.css';
+@use './flags/flags.css';

src/assets/layout/_core.scss

@@ -1,6 +1,7 @@
 html {
     height: 100%;
     font-size: 14px;
+    line-height: 1.2;
 }
 
 body {

src/assets/layout/_topbar.scss

@@ -41,7 +41,6 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        color: var(--text-color-secondary);
         border-radius: 50%;
         width: 2.5rem;
         height: 2.5rem;

src/assets/styles.scss

@@ -1,5 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
-@use '@/assets/layout/layout.scss';
 @use 'primeicons/primeicons.css';
+@use '@/assets/layout/layout.scss';
 @use '@/assets/demo/demo.scss';
-

src/assets/tailwind.css

@@ -1,3 +1,32 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-primeui';
+
+@custom-variant dark (&:where([class*="app-dark"], [class*="app-dark"] *));
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-2xl: 1920px;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}

src/components/BlockViewer.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { reactive, ref } from 'vue';
+
+const props = defineProps({
+    header: {
+        type: String,
+        default: null
+    },
+    code: null,
+    recent: {
+        type: Boolean,
+        default: false
+    },
+    free: {
+        type: Boolean,
+        default: false
+    },
+    containerClass: null,
+    previewStyle: null
+});
+
+const BlockView = reactive({
+    PREVIEW: 0,
+    CODE: 1
+});
+const blockView = ref(0);
+const codeCopied = ref(false);
+const codeCopyLoading = ref(false);
+
+function activateView(event, blockViewValue) {
+    blockView.value = blockViewValue;
+    event.preventDefault();
+}
+
+async function copyCode(event) {
+    if (codeCopied.value || codeCopyLoading.value) return;
+
+    codeCopyLoading.value = true;
+    event.preventDefault();
+
+    try {
+        await navigator.clipboard.writeText(props.code);
+        codeCopyLoading.value = false;
+        codeCopied.value = true;
+        setTimeout(() => {
+            codeCopied.value = false;
+        }, 2000);
+    } catch (err) {
+        console.error('Clipboard write failed:', err);
+        codeCopyLoading.value = false;
+    }
+}
+</script>
+
+<template>
+    <div class="mb-16 overflow-hidden">
+        <div class="flex flex-col lg:flex-row justify-between py-4 gap-4 lg:gap-2 px-0!">
+            <div class="flex items-center gap-2">
+                <span class="font-medium text-xl">{{ header }}</span>
+                <span v-if="free" class="flex items-center justify-center px-1.5 py-1 w-fit bg-emerald-500 text-emerald-100 dark:bg-emerald-400 dark:text-emerald-800 rounded-md leading-none! text-xs md:text-sm">Free</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <!-- Preview/Code Toggle -->
+                <div class="inline-flex border border-surface-200 dark:border-surface-700 rounded-2xl overflow-hidden min-h-10">
+                    <button
+                        :class="[
+                            'min-w-28 flex items-center gap-1 justify-center px-4 py-2 rounded-2xl transition-all duration-200 font-medium cursor-pointer   ',
+                            blockView === BlockView.CODE ? 'bg-primary text-primary-contrast ' : 'text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-0'
+                        ]"
+                        @click="activateView($event, BlockView.CODE)"
+                    >
+                        <span>Code</span>
+                    </button>
+                    <button
+                        :class="[
+                            'min-w-28 flex items-center gap-1 justify-center px-4 py-2 rounded-2xl transition-all duration-200 font-medium cursor-pointer',
+                            blockView === BlockView.PREVIEW ? 'bg-primary text-primary-contrast   ' : 'text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-0'
+                        ]"
+                        @click="activateView($event, BlockView.PREVIEW)"
+                    >
+                        <span>Preview</span>
+                    </button>
+                </div>
+
+                <!-- Separator -->
+                <div class="h-6 w-px bg-surface-200 dark:bg-surface-700 hidden lg:block"></div>
+
+                <!-- Animated Copy Button -->
+                <div class="flex items-center gap-2 grow lg:grow-0 justify-end lg:justify-start">
+                    <button
+                        @click="copyCode($event)"
+                        :disabled="codeCopyLoading"
+                        class="relative w-10 h-10 border border-surface-200 dark:border-surface-700 rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 dark:focus-visible:ring-offset-surface-900 cursor-pointer disabled:cursor-wait"
+                    >
+                        <!-- Loading Spinner -->
+                        <span :class="['absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300 leading-none', codeCopyLoading ? 'opacity-100 scale-100 z-10' : 'opacity-0 scale-50 -z-[2]']">
+                            <i class="pi pi-spinner animate-spin text-surface-700 dark:text-surface-300" style="font-size: 1.25rem"></i>
+                        </span>
+
+                        <!-- Checkmark Icon -->
+                        <span :class="['absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300 leading-none', codeCopied && !codeCopyLoading ? 'opacity-100 scale-100 z-10' : 'opacity-0 scale-50 -z-[2]']">
+                            <svg class="w-5 h-5 fill-green-600 dark:fill-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <g id="check">
+                                    <path d="M9,18.25A.74.74,0,0,1,8.47,18l-5-5A.75.75,0,1,1,4.53,12L9,16.44,19.47,6A.75.75,0,0,1,20.53,7l-11,11A.74.74,0,0,1,9,18.25Z"></path>
+                                </g>
+                            </svg>
+                        </span>
+
+                        <!-- Copy Icon -->
+                        <span :class="['absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300 leading-none', !codeCopied && !codeCopyLoading ? 'opacity-100 scale-100 z-10' : 'opacity-0 scale-50 -z-[2]']">
+                            <svg class="w-5 h-5 fill-surface-700 dark:fill-surface-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                                <g id="clone">
+                                    <path
+                                        d="M14,16.75H6A2.75,2.75,0,0,1,3.25,14V6A2.75,2.75,0,0,1,6,3.25h8A2.75,2.75,0,0,1,16.75,6v8A2.75,2.75,0,0,1,14,16.75Zm-8-12A1.25,1.25,0,0,0,4.75,6v8A1.25,1.25,0,0,0,6,15.25h8A1.25,1.25,0,0,0,15.25,14V6A1.25,1.25,0,0,0,14,4.75Z"
+                                    ></path>
+                                    <path d="M18,20.75H10A2.75,2.75,0,0,1,7.25,18V16h1.5v2A1.25,1.25,0,0,0,10,19.25h8A1.25,1.25,0,0,0,19.25,18V10A1.25,1.25,0,0,0,18,8.75H16V7.25h2A2.75,2.75,0,0,1,20.75,10v8A2.75,2.75,0,0,1,18,20.75Z"></path>
+                                </g>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="p-0 border border-surface-200 dark:border-surface-700 rounded-xl overflow-hidden">
+            <div :class="containerClass" :style="previewStyle" v-if="blockView == BlockView.PREVIEW">
+                <slot />
+            </div>
+            <div v-if="blockView === BlockView.CODE">
+                <pre class="app-code"><code>{{code}}</code></pre>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+pre {
+    border: 0 none !important;
+    border-radius: 0 !important;
+    .app-code {
+        background: var(--p-surface-900) !important;
+        margin: 0 !important;
+        border: 0 none !important;
+        &:before,
+        &:after {
+            display: none !important;
+        }
+        code {
+            color: var(--p-surface-50);
+            padding: 1rem;
+            line-height: 1.5;
+            display: block;
+            font-family: monaco, Consolas, monospace;
+        }
+    }
+}
+</style>

src/components/landing/FooterWidget.vue

@@ -2,7 +2,7 @@
     <div class="py-6 px-6 mx-0 mt-20 lg:mx-20">
         <div class="grid grid-cols-12 gap-4">
             <div class="col-span-12 md:col-span-2">
-                <a @click="smoothScroll('#home')" class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer">
+                <a class="flex flex-wrap items-center justify-center md:justify-start md:mb-0 mb-4 cursor-pointer">
                     <svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-14 mr-2">
                         <path
                             fill-rule="evenodd"

src/layout/AppConfigurator.vue

@@ -1,15 +1,17 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
-import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
-import Aura from '@primevue/themes/aura';
-import Lara from '@primevue/themes/lara';
+import { $t, updatePreset, updateSurfacePalette } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+import Lara from '@primeuix/themes/lara';
+import Nora from '@primeuix/themes/nora';
 import { ref } from 'vue';
 
 const { layoutConfig, isDarkTheme } = useLayout();
 
 const presets = {
     Aura,
-    Lara
+    Lara,
+    Nora
 };
 const preset = ref(layoutConfig.preset);
 const presetOptions = ref(Object.keys(presets));

src/layout/AppMenu.vue

@@ -28,6 +28,23 @@ const model = ref([
             { label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
         ]
     },
+    {
+        label: 'Prime Blocks',
+        icon: 'pi pi-fw pi-prime',
+        items: [
+            {
+                label: 'Free Blocks',
+                icon: 'pi pi-fw pi-eye',
+                to: '/blocks'
+            },
+            {
+                label: 'All Blocks',
+                icon: 'pi pi-fw pi-globe',
+                url: 'https://blocks.primevue.org/',
+                target: '_blank'
+            }
+        ]
+    },
     {
         label: 'Pages',
         icon: 'pi pi-fw pi-briefcase',

src/main.js

@@ -2,13 +2,13 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-import Aura from '@primevue/themes/aura';
+import Aura from '@primeuix/themes/aura';
 import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import ToastService from 'primevue/toastservice';
 
-import '@/assets/styles.scss';
 import '@/assets/tailwind.css';
+import '@/assets/styles.scss';
 
 const app = createApp(App);
 

src/router/index.js

@@ -89,6 +89,14 @@ const router = createRouter({
                     name: 'timeline',
                     component: () => import('@/views/uikit/TimelineDoc.vue')
                 },
+                {
+                    path: '/blocks',
+                    name: 'blocks',
+                    meta: {
+                        breadcrumb: ['Prime Blocks', 'Free Blocks']
+                    },
+                    component: () => import('@/views/utilities/Blocks.vue')
+                },
                 {
                     path: '/pages/empty',
                     name: 'empty',

src/views/pages/Documentation.vue

@@ -45,6 +45,87 @@ npm run dev</code></pre>
             CSS variables used in the template derive their values from the PrimeVue styled mode presets, use the files under <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">assets/layout/_variables.scss</span> to customize
             according to your requirements.
         </p>
+
+        <div class="font-semibold text-xl mb-4">Add Sakai-Vue to a Nuxt Project</div>
+        <p class="text-lg mb-4">To get started, create a Nuxt project.</p>
+        <pre class="app-code">
+<code>npx nuxi@latest init sakai-nuxt</code></pre>
+
+        <p class="text-lg mb-4">Add Prime related libraries to the project.</p>
+        <pre class="app-code">
+<code>npm install primevue @primevue/themes tailwindcss-primeui primeicons
+npm install --save-dev @primevue/nuxt-module</code></pre>
+
+        <p class="text-lg mb-4">Add PrimeVue-Nuxt module to <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">nuxt.config.js</span></p>
+        <pre class="app-code">
+<code>modules: [
+    '@primevue/nuxt-module',
+]</code></pre>
+
+        <p class="text-lg mb-4">Install <a href="https://tailwindcss.com/docs/guides/nuxtjs" class="font-medium text-primary hover:underline">Tailwind CSS</a> with Nuxt using official documentation.</p>
+
+        <p class="text-lg mb-4">
+            Add <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">tailwindcss-primeui</span> package as a plugin to <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">tailwind.config.js</span>
+        </p>
+        <pre class="app-code">
+<code>plugins: [require('tailwindcss-primeui')]</code></pre>
+
+        <p class="text-lg mb-4">Add PrimeVue to in <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">nuxt.config.js</span></p>
+        <pre class="app-code">
+<code>import Aura from '@primevue/themes/aura';
+
+primevue: {
+    options: {
+        theme: {
+            preset: Aura,
+            options: {
+                darkModeSelector: '.app-dark'
+            }
+        }
+    }
+}</code></pre>
+
+        <p class="text-lg mb-4">
+            Copy <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">src/assets</span> folder and paste them to <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">assets</span> folder to your Nuxt project.
+            And add to <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">nuxt.config.js</span>
+        </p>
+        <pre class="app-code">
+<code>css: ['~/assets/tailwind.css', '~/assets/styles.scss']</code></pre>
+
+        <p class="text-lg mb-4">Change <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">app.vue</span></p>
+        <pre class="app-code">
+<code>&lt;template&gt;
+    &lt;NuxtLayout&gt;
+        &lt;NuxtPage /&gt;
+    &lt;/NuxtLayout&gt;
+&lt;/template&gt;</code></pre>
+
+        <p class="text-lg mb-4">Create <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">layouts/default.vue</span> and paste this code:</p>
+        <pre class="app-code">
+<code>&lt;script setup&gt;
+import AppLayout from './AppLayout.vue';
+&lt;/script&gt;
+
+&lt;template&gt;
+    &lt;AppLayout /&gt;
+&lt;/template&gt;</code></pre>
+
+        <p class="text-lg mb-4">
+            Create <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">layouts</span> folder and copy <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">src/layout</span> folder and paste them. And then
+            create <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">composables/use-layout.vue</span> and replace it with
+            <span class="bg-highlight px-2 py-1 rounded-border not-italic text-base">src/layout/composables/layout.js</span>. Then remove this line:
+        </p>
+        <pre class="app-code">
+<code>import { useLayout } from '@/layout/composables/layout';</code></pre>
+
+        <p class="text-lg mb-4">As a final step, copy the following folders:</p>
+        <ul class="leading-normal list-disc pl-8 text-lg mb-4">
+            <li><span class="text-primary font-medium">public/demo</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">public</span></li>
+            <li><span class="text-primary font-medium">src/components</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">components</span></li>
+            <li><span class="text-primary font-medium">src/service</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">service</span></li>
+            <li><span class="text-primary font-medium">src/views/uikit</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">pages/uikit</span></li>
+            <li><span class="text-primary font-medium">src/views/pages</span> <i class="pi pi-arrow-right !text-sm mr-1"></i> <span class="text-primary font-medium">pages</span></li>
+        </ul>
     </div>
 </template>
 

src/views/uikit/MiscDoc.vue

@@ -84,11 +84,11 @@ onBeforeUnmount(() => {
                 <div class="font-semibold text-xl mb-4">Avatar</div>
                 <div class="font-semibold mb-4">Group</div>
                 <AvatarGroup>
-                    <Avatar :image="'/demo/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'/demo/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'/demo/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'/demo/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
-                    <Avatar :image="'/demo/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png'" size="large" shape="circle"></Avatar>
+                    <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png'" size="large" shape="circle"></Avatar>
                     <Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
                 </AvatarGroup>
 
@@ -168,9 +168,9 @@ onBeforeUnmount(() => {
 
                 <div class="font-semibold my-4">Image</div>
                 <div class="flex items-center flex-col sm:flex-row">
-                    <Chip label="Amy Elsner" :image="'/demo/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
-                    <Chip label="Asiya Javayant" :image="'/demo/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
-                    <Chip label="Onyama Limba" :image="'/demo/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Amy Elsner" :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Asiya Javayant" :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" class="mr-2 mb-2"></Chip>
+                    <Chip label="Onyama Limba" :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2 mb-2"></Chip>
                 </div>
             </div>
 

src/views/uikit/OverlayDoc.vue

@@ -14,7 +14,6 @@ const visibleFull = ref(false);
 const products = ref(null);
 const selectedProduct = ref(null);
 const op = ref(null);
-const op2 = ref(null);
 const popup = ref(null);
 
 const toast = useToast();
@@ -41,7 +40,7 @@ function closeConfirmation() {
 }
 
 function toggleDataTable(event) {
-    op2.value.toggle(event);
+    op.value.toggle(event);
 }
 
 function onProductSelect(event) {
@@ -93,7 +92,7 @@ function confirm(event) {
                 <div class="font-semibold text-xl mb-4">Popover</div>
                 <div class="flex flex-wrap gap-2">
                     <Button type="button" label="Show" @click="toggleDataTable" />
-                    <Popover ref="op2" id="overlay_panel" style="width: 450px">
+                    <Popover ref="op" id="overlay_panel" style="width: 450px">
                         <DataTable v-model:selection="selectedProduct" :value="products" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                             <Column field="name" header="Name" sortable style="min-width: 12rem"></Column>
                             <Column header="Image">

tailwind.config.js

@@ -1,15 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    darkMode: ['selector', '[class*="app-dark"]'],
-    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
-    plugins: [require('tailwindcss-primeui')],
-    theme: {
-        screens: {
-            sm: '576px',
-            md: '768px',
-            lg: '992px',
-            xl: '1200px',
-            '2xl': '1920px'
-        }
-    }
-};

vite.config.mjs

@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url';
 
 import { PrimeVueResolver } from '@primevue/auto-import-resolver';
+import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 import Components from 'unplugin-vue-components/vite';
 import { defineConfig } from 'vite';
@@ -12,6 +13,7 @@ export default defineConfig({
     },
     plugins: [
         vue(),
+        tailwindcss(),
         Components({
             resolvers: [PrimeVueResolver()]
         })