4.0.0 - Updgrade to Tailwind v4

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG.md
 
+## [4.0.0] - 2025-02-04
+
+- Updgrade to Tailwind v4
+- Update dependencies
+
 ## [3.1.0] 2024-12-08
 
 - Upgrade to Vite 6

README.md

@@ -3,6 +3,9 @@
 ![Mosaic TailwindCSS template preview](https://github.com/cruip/vuejs-admin-dashboard-template/assets/2683512/3b9af06c-f3b2-45c5-8c60-052989cbebcb)
 
 **Mosaic Lite Vue** is a responsive dashboard template built on top of TailwindCSS and fully coded in Vue.js. This template is a great starting point for anyone who wants to create a user interface for SaaS products, administrator dashboards, modern web apps, and more.
+
+**UPDATE 2025-02-04** Added Tailwind v4 support!
+
 Use it for whatever you want, and be sure to reach us out on [Twitter](https://twitter.com/Cruip_com) if you build anything cool/useful with it.
 
 [Also available in React](https://github.com/cruip/tailwind-dashboard-template)
@@ -39,17 +42,17 @@ This project was built with [Vue 3](https://v3.vuejs.org/) and [Vite](https://vi
 
 ### Project setup
 ```
-npm install
+pnpm install
 ```
 
 #### Compiles and hot-reloads for development
 ```
-npm run dev
+pnpm run dev
 ```
 
 #### Compiles and minifies for production
 ```
-npm run build
+pnpm run build
 ```
 
 #### Customize configuration
@@ -62,7 +65,7 @@ See [Configuration Reference](https://vitejs.dev/guide/).
 ## Terms and License
 
 - Released under the [GPL](https://www.gnu.org/licenses/gpl-3.0.html).
-- Copyright 2021 [Cruip](https://cruip.com/).
+- Copyright 2025 [Cruip](https://cruip.com/).
 - Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template.
 - Attribution is not required, although it is really appreciated.
 

package.json

@@ -19,11 +19,11 @@
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/compiler-sfc": "^3.2.20",
-    "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
-    "tailwindcss": "^3.3.6",
+    "tailwindcss": "^4.0.0",
     "vite": "^6.0.3"
   }
 }

postcss.config.cjs

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

src/charts/BarChart01.vue

@@ -10,7 +10,7 @@
 <script>
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useDark } from '@vueuse/core'
-import { chartColors } from './ChartjsConfig'
+import { getChartColors } from './ChartjsConfig'
 
 import {
   Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
@@ -18,7 +18,7 @@ import {
 import 'chartjs-adapter-moment'
 
 // Import utilities
-import { tailwindConfig, formatValue } from '../utils/Utils'
+import { formatValue } from '../utils/Utils'
 
 Chart.register(BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend)
 
@@ -31,7 +31,7 @@ export default {
     const legend = ref(null)
     let chart = null
     const darkMode = useDark()
-    const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
+    const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
     
     onMounted(() => {
       const ctx = canvas.value
@@ -130,10 +130,10 @@ export default {
               // Color box
               const box = document.createElement('span')
               box.style.display = 'block'
-              box.style.width = tailwindConfig().theme.width[3]
+              box.style.width = '12px'
-              box.style.height = tailwindConfig().theme.height[3]
+              box.style.height = '12px'
-              box.style.borderRadius = tailwindConfig().theme.borderRadius.full
+              box.style.borderRadius = 'calc(infinity * 1px)'
-              box.style.marginRight = tailwindConfig().theme.margin[2]
+              box.style.marginRight = '8px'
               box.style.borderWidth = '3px'
               box.style.borderColor = item.fillStyle
               box.style.pointerEvents = 'none'
@@ -143,15 +143,15 @@ export default {
               labelContainer.style.alignItems = 'center'
               const value = document.createElement('span')
               value.classList.add('text-gray-800', 'dark:text-gray-100')
-              value.style.fontSize = tailwindConfig().theme.fontSize['3xl'][0]
+              value.style.fontSize = '30px'
-              value.style.lineHeight = tailwindConfig().theme.fontSize['3xl'][1].lineHeight
+              value.style.lineHeight = 'calc(2.25 / 1.875)'
-              value.style.fontWeight = tailwindConfig().theme.fontWeight.bold
+              value.style.fontWeight = '700'
-              value.style.marginRight = tailwindConfig().theme.margin[2]
+              value.style.marginRight = '8px'
               value.style.pointerEvents = 'none'
               const label = document.createElement('span')
               label.classList.add('text-gray-500', 'dark:text-gray-400')
-              label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
+              label.style.fontSize = '14px'
-              label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
+              label.style.lineHeight = 'calc(1.25 / 0.875)'
               const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0)
               const valueText = document.createTextNode(formatValue(theValue))
               const labelText = document.createTextNode(item.text)

src/charts/BarChart02.vue

@@ -5,7 +5,7 @@
 <script>
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useDark } from '@vueuse/core'
-import { chartColors } from './ChartjsConfig'
+import { getChartColors } from './ChartjsConfig'
 
 import {
   Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
@@ -25,7 +25,7 @@ export default {
     const canvas = ref(null)
     let chart = null
     const darkMode = useDark()
-    const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
+    const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
     
     onMounted(() => {
       const ctx = canvas.value

src/charts/BarChart03.vue

@@ -13,7 +13,7 @@
 <script>
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useDark } from '@vueuse/core'
-import { chartColors } from './ChartjsConfig'
+import { getChartColors } from './ChartjsConfig'
 
 import {
   Chart, BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend,
@@ -21,7 +21,7 @@ import {
 import 'chartjs-adapter-moment'
 
 // Import utilities
-import { tailwindConfig } from '../utils/Utils'
+import { getCssVariable } from '../utils/Utils'
 
 Chart.register(BarController, BarElement, LinearScale, CategoryScale, Tooltip, Legend)
 
@@ -34,7 +34,7 @@ export default {
     const legend = ref(null)
     let chart = null
     const darkMode = useDark()
-    const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors    
+    const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
     
     onMounted(() => {
 
@@ -108,22 +108,22 @@ export default {
               li.style.display = 'flex'
               li.style.justifyContent = 'space-between'
               li.style.alignItems = 'center'
-              li.style.paddingTop = tailwindConfig().theme.padding[2.5]
+              li.style.paddingTop = '10px'
-              li.style.paddingBottom = tailwindConfig().theme.padding[2.5]
+              li.style.paddingBottom = '10px'
               const wrapper = document.createElement('div')
               wrapper.style.display = 'flex'
               wrapper.style.alignItems = 'center'
               const box = document.createElement('div')
-              box.style.width = tailwindConfig().theme.width[3]
+              box.style.width = '12px'
-              box.style.height = tailwindConfig().theme.width[3]
+              box.style.height = '12px'
-              box.style.borderRadius = tailwindConfig().theme.borderRadius.sm
+              box.style.borderRadius = '4px'
-              box.style.marginRight = tailwindConfig().theme.margin[3]
+              box.style.marginRight = '12px'
               box.style.backgroundColor = item.fillStyle
               const label = document.createElement('div')
               const value = document.createElement('div')
-              value.style.fontWeight = tailwindConfig().theme.fontWeight.medium
+              value.style.fontWeight = '500'
-              value.style.marginLeft = tailwindConfig().theme.margin[3]
+              value.style.marginLeft = '12px'
-              value.style.color = item.text === 'Other' ? tailwindConfig().theme.colors.gray[400] : item.fillStyle
+              value.style.color = item.text === 'Other' ? getCssVariable('--color-gray-400') : item.fillStyle
               const theValue = c.data.datasets[item.datasetIndex].data.reduce((a, b) => a + b, 0)
               const valueText = document.createTextNode(`${parseInt(theValue / max * 100)}%`)
               const labelText = document.createTextNode(item.text)

src/charts/ChartjsConfig.js

@@ -1,7 +1,7 @@
 // Import Chart.js
 import { Chart, Tooltip } from 'chart.js'
 // Import Tailwind config
-import { tailwindConfig, hexToRGB } from '../utils/Utils'
+import { adjustColorOpacity, getCssVariable } from '../utils/Utils'
 
 Chart.register(Tooltip)
 
@@ -30,33 +30,33 @@ export const chartAreaGradient = (ctx, chartArea, colorStops) => {
   return gradient;
 };
 
-export const chartColors = {
+export const getChartColors = () => ({
   textColor: {
-    light: tailwindConfig().theme.colors.gray[400],
+    light: getCssVariable('--color-gray-400'),
-    dark: tailwindConfig().theme.colors.gray[500]
+    dark: getCssVariable('--color-gray-500')
   },
   gridColor: {
-    light: tailwindConfig().theme.colors.gray[100],
+    light: getCssVariable('--color-gray-100'),
-    dark: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[700])}, 0.6)`
+    dark: adjustColorOpacity(getCssVariable('--color-gray-700'), 0.6)
   },
   backdropColor: {
-    light: tailwindConfig().theme.colors.white,
+    light: getCssVariable('--color-white'),
-    dark: tailwindConfig().theme.colors.gray[800]
+    dark: getCssVariable('--color-gray-800')
   },
   tooltipTitleColor: {
-    light: tailwindConfig().theme.colors.gray[800],
+    light: getCssVariable('--color-gray-800'),
-    dark: tailwindConfig().theme.colors.gray[100]
+    dark: getCssVariable('--color-gray-100')
   },
   tooltipBodyColor : {
-    light: tailwindConfig().theme.colors.gray[500],
+    light: getCssVariable('--color-gray-500'),
-    dark: tailwindConfig().theme.colors.gray[400]
+    dark: getCssVariable('--color-gray-400')
   },
   tooltipBgColor: {
-    light: tailwindConfig().theme.colors.white,
+    light: getCssVariable('--color-white'),
-    dark: tailwindConfig().theme.colors.gray[700]
+    dark: getCssVariable('--color-gray-700')
   },
   tooltipBorderColor: {
-    light: tailwindConfig().theme.colors.gray[200],
+    light: getCssVariable('--color-gray-200'),
-    dark: tailwindConfig().theme.colors.gray[600]
+    dark: getCssVariable('--color-gray-600')
   },
-}
+})

src/charts/DoughnutChart.vue

@@ -12,16 +12,13 @@
 <script>
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useDark } from '@vueuse/core'
-import { chartColors } from './ChartjsConfig'
+import { getChartColors } from './ChartjsConfig'
 
 import {
   Chart, DoughnutController, ArcElement, TimeScale, Tooltip,
 } from 'chart.js'
 import 'chartjs-adapter-moment'
 
-// Import utilities
-import { tailwindConfig } from '../utils/Utils'
-
 Chart.register(DoughnutController, ArcElement, TimeScale, Tooltip)
 
 export default {
@@ -33,7 +30,7 @@ export default {
     const legend = ref(null)
     let chart = null
     const darkMode = useDark()
-    const { tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
+    const { tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
     
     onMounted(() => {
       const ctx = canvas.value
@@ -79,10 +76,10 @@ export default {
             const items = c.options.plugins.legend.labels.generateLabels(c)
             items.forEach((item) => {
               const li = document.createElement('li')
-              li.style.margin = tailwindConfig().theme.margin[1]
+              li.style.margin = '4px'
               // Button element
               const button = document.createElement('button')
-              button.classList.add('btn-xs', 'bg-white', 'dark:bg-gray-700', 'text-gray-500', 'dark:text-gray-400', 'shadow-sm', 'shadow-black/[0.08]', 'rounded-full')
+              button.classList.add('btn-xs', 'bg-white', 'dark:bg-gray-700', 'text-gray-500', 'dark:text-gray-400', 'shadow-xs', 'shadow-black/[0.08]', 'rounded-full')
               button.style.opacity = item.hidden ? '.3' : ''
               button.onclick = () => {
                 c.toggleDataVisibility(item.index, !item.index)
@@ -91,11 +88,11 @@ export default {
               // Color box
               const box = document.createElement('span')
               box.style.display = 'block'
-              box.style.width = tailwindConfig().theme.width[2]
+              box.style.width = '8px'
-              box.style.height = tailwindConfig().theme.height[2]
+              box.style.height = '8px'
               box.style.backgroundColor = item.fillStyle
-              box.style.borderRadius = tailwindConfig().theme.borderRadius.sm
+              box.style.borderRadius = '4px'
-              box.style.marginRight = tailwindConfig().theme.margin[1]
+              box.style.marginRight = '4px'
               box.style.pointerEvents = 'none'
               // Label
               const label = document.createElement('span')

src/charts/LineChart01.vue

@@ -5,7 +5,7 @@
 <script>
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useDark } from '@vueuse/core'
-import { chartColors } from './ChartjsConfig'
+import { getChartColors } from './ChartjsConfig'
 
 import {
   Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
@@ -25,7 +25,7 @@ export default {
     const canvas = ref(null)
     let chart = null
     const darkMode = useDark()
-    const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
+    const { tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
     
     onMounted(() => {
       const ctx = canvas.value

src/charts/LineChart02.vue

@@ -19,7 +19,7 @@
 <script>
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useDark } from '@vueuse/core'
-import { chartColors } from './ChartjsConfig'
+import { getChartColors } from './ChartjsConfig'
 
 import {
   Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
@@ -27,7 +27,7 @@ import {
 import 'chartjs-adapter-moment'
 
 // Import utilities
-import { tailwindConfig, formatValue } from '../utils/Utils'
+import { formatValue } from '../utils/Utils'
 
 Chart.register(LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip)
 
@@ -40,7 +40,7 @@ export default {
     const legend = ref(null)
     let chart = null
     const darkMode = useDark()
-    const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
+    const { textColor, gridColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
     
     onMounted(() => {
       const ctx = canvas.value
@@ -134,18 +134,18 @@ export default {
               // Color box
               const box = document.createElement('span')
               box.style.display = 'block'
-              box.style.width = tailwindConfig().theme.width[3]
+              box.style.width = '12px'
-              box.style.height = tailwindConfig().theme.height[3]
+              box.style.height = '12px'
-              box.style.borderRadius = tailwindConfig().theme.borderRadius.full
+              box.style.borderRadius = 'calc(infinity * 1px)'
-              box.style.marginRight = tailwindConfig().theme.margin[2]
+              box.style.marginRight = '8px'
               box.style.borderWidth = '3px'
               box.style.borderColor = c.data.datasets[item.datasetIndex].borderColor
               box.style.pointerEvents = 'none'
               // Label
               const label = document.createElement('span')
               label.classList.add('text-gray-500', 'dark:text-gray-400')
-              label.style.fontSize = tailwindConfig().theme.fontSize.sm[0]
+              label.style.fontSize = '14px'
-              label.style.lineHeight = tailwindConfig().theme.fontSize.sm[1].lineHeight
+              label.style.lineHeight = 'calc(1.25 / 0.875)'
               const labelText = document.createTextNode(item.text)
               label.appendChild(labelText)
               li.appendChild(button)

src/charts/RealtimeChart.vue

@@ -13,7 +13,7 @@
 <script>
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { useDark } from '@vueuse/core'
-import { chartColors } from './ChartjsConfig'
+import { getChartColors } from './ChartjsConfig'
 
 import {
   Chart, LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip,
@@ -21,7 +21,7 @@ import {
 import 'chartjs-adapter-moment'
 
 // Import utilities
-import { tailwindConfig, hexToRGB, formatValue } from '../utils/Utils'
+import { adjustColorOpacity, getCssVariable, formatValue } from '../utils/Utils'
 
 Chart.register(LineController, LineElement, PointElement, LinearScale, TimeScale, Tooltip)
 
@@ -35,7 +35,7 @@ export default {
     const chartDeviation = ref(null)
     let chart = null
     const darkMode = useDark()
-    const { textColor, gridColor, tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = chartColors
+    const { textColor, gridColor, tooltipTitleColor, tooltipBodyColor, tooltipBgColor, tooltipBorderColor } = getChartColors()
 
     // function that updates header values
     const handleHeaderValues = (data, chartValue, chartDeviation) => {
@@ -44,11 +44,11 @@ export default {
       const diff = ((currentValue - previousValue) / previousValue) * 100
       chartValue.value.innerHTML = data.datasets[0].data[data.datasets[0].data.length - 1]
       if (diff < 0) {
-        chartDeviation.value.style.backgroundColor = `rgba(${hexToRGB(tailwindConfig().theme.colors.red[500])}, 0.2)`
+        chartDeviation.value.style.backgroundColor = adjustColorOpacity(getCssVariable('--color-red-500'), 0.2)
-        chartDeviation.value.style.color = tailwindConfig().theme.colors.red[700];
+        chartDeviation.value.style.color = getCssVariable('--color-red-700');
       } else {
-        chartDeviation.value.style.backgroundColor = `rgba(${hexToRGB(tailwindConfig().theme.colors.green[500])}, 0.2)`
+        chartDeviation.value.style.backgroundColor = adjustColorOpacity(getCssVariable('--color-green-500'), 0.2)
-        chartDeviation.value.style.color = tailwindConfig().theme.colors.green[700];
+        chartDeviation.value.style.color = getCssVariable('--color-green-700');
       }      
       chartDeviation.value.innerHTML = `${diff > 0 ? '+' : ''}${diff.toFixed(2)}%`
     }    

src/components/ModalSearch.vue

@@ -8,7 +8,7 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-show="modalOpen" class="fixed inset-0 bg-gray-900 bg-opacity-30 z-50 transition-opacity" aria-hidden="true"></div>
+    <div v-show="modalOpen" class="fixed inset-0 bg-gray-900/30 z-50 transition-opacity" aria-hidden="true"></div>
   </transition>
   <!-- Modal dialog -->
   <transition

src/css/additional-styles/flatpickr.css

@@ -26,7 +26,7 @@
     width: calc(var(--daysWidth) + calc(var(--calendarPadding)*2));
 }
 
-@screen lg {
+@media (width >= theme(--breakpoint-lg)) {
     .flatpickr-calendar {
         @apply left-0 right-auto;
         margin-left: 0;

src/css/additional-styles/utility-patterns.css

@@ -15,7 +15,7 @@
     @apply text-2xl font-extrabold tracking-tight;
 }
 
-@screen md {
+@media (width >= theme(--breakpoint-md)) {
     .h1 {
         @apply text-5xl;
     }
@@ -30,7 +30,7 @@
 .btn-lg,
 .btn-sm,
 .btn-xs {
-    @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition;
+    @apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-xs transition;
 }
 
 .btn {
@@ -67,14 +67,14 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 .form-checkbox {
-    @apply rounded;
+    @apply rounded-sm;
 }
 
 .form-input,
 .form-textarea,
 .form-multiselect,
 .form-select {
-    @apply text-sm text-gray-800 dark:text-gray-100 leading-5 py-2 px-3 border-gray-200 hover:border-gray-300 focus:border-gray-300 dark:border-gray-700/60 dark:hover:border-gray-600 dark:focus:border-gray-600 shadow-sm rounded-lg;
+    @apply text-sm text-gray-800 dark:text-gray-100 leading-5 py-2 px-3 border-gray-200 hover:border-gray-300 focus:border-gray-300 dark:border-gray-700/60 dark:hover:border-gray-600 dark:focus:border-gray-600 shadow-xs rounded-lg;
 }
 
 .form-input,
@@ -88,7 +88,7 @@ input[type="search"]::-webkit-search-results-decoration {
 
 .form-checkbox,
 .form-radio {
-    @apply text-violet-500 checked:bg-violet-500 dark:checked:border-transparent border border-gray-300 focus:border-violet-300 dark:border-gray-700/60 dark:focus:border-violet-500/50;
+    @apply text-violet-500 checked:bg-violet-500 checked:border-transparent border border-gray-300 dark:border-gray-700/60 dark:checked:border-transparent focus-visible:not-checked:ring-2 focus-visible:not-checked:ring-violet-500/50;
 }
 
 /* Switch element */
@@ -111,8 +111,12 @@ input[type="search"]::-webkit-search-results-decoration {
     transition: all .15s ease-out;
 }
 
+.form-switch input[type="checkbox"] + label {
+  @apply bg-gray-400 dark:bg-gray-700;
+}
+
 .form-switch input[type="checkbox"]:checked + label {
-    @apply bg-violet-500;
+  @apply bg-violet-500;
 }
 
 .form-switch input[type="checkbox"]:checked + label > span:first-child {

src/css/style.css

@@ -1,10 +1,139 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');
 
-@import 'tailwindcss/base';
+@import 'tailwindcss';
-@import 'tailwindcss/components';
+@import './additional-styles/flatpickr.css';
+@import './additional-styles/utility-patterns.css' layer(components);
 
-/* Additional styles */
+@plugin "@tailwindcss/forms" {
-@import 'additional-styles/utility-patterns.css';
+  strategy: base;
-@import 'additional-styles/flatpickr.css';
+}
 
-@import 'tailwindcss/utilities';
+@custom-variant dark (&:is(.dark *));
+@custom-variant sidebar-expanded (&:is(.sidebar-expanded *));
+
+@theme {
+  --shadow-sm: 0 1px 1px 0 rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.02);
+
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #bfc4cd;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+
+  --color-violet-50: #f1eeff;
+  --color-violet-100: #e6e1ff;
+  --color-violet-200: #d2cbff;
+  --color-violet-300: #b7acff;
+  --color-violet-400: #9c8cff;
+  --color-violet-500: #8470ff;
+  --color-violet-600: #755ff8;
+  --color-violet-700: #5d47de;
+  --color-violet-800: #4634b1;
+  --color-violet-900: #2f227c;
+  --color-violet-950: #1c1357;
+
+  --color-sky-50: #e3f3ff;
+  --color-sky-100: #d1ecff;
+  --color-sky-200: #b6e1ff;
+  --color-sky-300: #a0d7ff;
+  --color-sky-400: #7bc8ff;
+  --color-sky-500: #67bfff;
+  --color-sky-600: #56b1f3;
+  --color-sky-700: #3193da;
+  --color-sky-800: #1c71ae;
+  --color-sky-900: #124d79;
+  --color-sky-950: #0b324f;
+
+  --color-green-50: #d2ffe2;
+  --color-green-100: #b1fdcd;
+  --color-green-200: #8bf0b0;
+  --color-green-300: #67e294;
+  --color-green-400: #4bd37d;
+  --color-green-500: #3ec972;
+  --color-green-600: #34bd68;
+  --color-green-700: #239f52;
+  --color-green-800: #15773a;
+  --color-green-900: #0f5429;
+  --color-green-950: #0a3f1e;
+
+  --color-red-50: #ffe8e8;
+  --color-red-100: #ffd1d1;
+  --color-red-200: #ffb2b2;
+  --color-red-300: #ff9494;
+  --color-red-400: #ff7474;
+  --color-red-500: #ff5656;
+  --color-red-600: #fa4949;
+  --color-red-700: #e63939;
+  --color-red-800: #c52727;
+  --color-red-900: #941818;
+  --color-red-950: #600f0f;
+
+  --color-yellow-50: #fff2c9;
+  --color-yellow-100: #ffe7a0;
+  --color-yellow-200: #ffe081;
+  --color-yellow-300: #ffd968;
+  --color-yellow-400: #f7cd4c;
+  --color-yellow-500: #f0bb33;
+  --color-yellow-600: #dfad2b;
+  --color-yellow-700: #bc9021;
+  --color-yellow-800: #816316;
+  --color-yellow-900: #4f3d0e;
+  --color-yellow-950: #342809;
+
+  --font-inter: "Inter", "sans-serif";
+
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1.5;
+  --text-sm: 0.875rem;
+  --text-sm--line-height: 1.5715;
+  --text-base: 1rem;
+  --text-base--line-height: 1.5;
+  --text-base--letter-spacing: -0.01em;
+  --text-lg: 1.125rem;
+  --text-lg--line-height: 1.5;
+  --text-lg--letter-spacing: -0.01em;
+  --text-xl: 1.25rem;
+  --text-xl--line-height: 1.5;
+  --text-xl--letter-spacing: -0.01em;
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: 1.33;
+  --text-2xl--letter-spacing: -0.01em;
+  --text-3xl: 1.88rem;
+  --text-3xl--line-height: 1.33;
+  --text-3xl--letter-spacing: -0.01em;
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: 1.25;
+  --text-4xl--letter-spacing: -0.02em;
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1.25;
+  --text-5xl--letter-spacing: -0.02em;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1.2;
+  --text-6xl--letter-spacing: -0.02em;
+
+  --breakpoint-xs: 480px;
+}
+
+/*
+  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/partials/Banner.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-50">
-    <div class="bg-gray-800 border border-transparent dark:border-gray-700/60 text-gray-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
+    <div class="bg-gray-800 border border-transparent dark:border-gray-700/60 text-gray-50 text-sm p-3 md:rounded-sm shadow-lg flex justify-between">
       <div class='text-gray-500 inline-flex'><a class="font-medium hover:underline text-gray-50" href="https://github.com/cruip/vuejs-admin-dashboard-template" target="_blank" rel="noreferrer">Download<span class="hidden sm:inline"> on GitHub</span></a> <span class="italic px-1.5">or</span> <a class="font-medium hover:underline text-emerald-400" href="https://cruip.com/mosaic/" target="_blank" rel="noreferrer">Check Premium Version</a></div>
       <button class="text-gray-500 hover:text-gray-400 pl-2 ml-3 border-l border-gray-700/60"  @click="open = false">
         <span class="sr-only">Close</span>

src/partials/Header.vue

@@ -2,7 +2,7 @@
   <header
     class="sticky top-0 before:absolute before:inset-0 before:backdrop-blur-md max-lg:before:bg-white/90 dark:max-lg:before:bg-gray-800/90 before:-z-10 z-30"
     :class="[
-      variant === 'v2' || variant === 'v3' ? 'before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10' : 'max-lg:shadow-sm lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90',
+      variant === 'v2' || variant === 'v3' ? 'before:bg-white after:absolute after:h-px after:inset-x-0 after:top-full after:bg-gray-200 dark:after:bg-gray-700/60 after:-z-10' : 'max-lg:shadow-xs lg:before:bg-gray-100/90 dark:lg:before:bg-gray-900/90',
       variant === 'v2' ? 'dark:before:bg-gray-800' : '',
       variant === 'v3' ? 'dark:before:bg-gray-900' : '',
     ]"

src/partials/Sidebar.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="min-w-fit">
     <!-- Sidebar backdrop (mobile only) -->
-    <div class="fixed inset-0 bg-gray-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true"></div>
+    <div class="fixed inset-0 bg-gray-900/30 z-40 lg:hidden lg:z-auto transition-opacity duration-200" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true"></div>
 
     <!-- Sidebar -->
     <div
       id="sidebar"
       ref="sidebar"
-      class="flex lg:!flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out"
+      class="flex lg:flex! flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-[100dvh] overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:w-64! shrink-0 bg-white dark:bg-gray-800 p-4 transition-all duration-200 ease-in-out"
-      :class="[variant === 'v2' ?  'border-r border-gray-200 dark:border-gray-700/60' : 'rounded-r-2xl shadow-sm', sidebarOpen ? 'translate-x-0' : '-translate-x-64']"
+      :class="[variant === 'v2' ?  'border-r border-gray-200 dark:border-gray-700/60' : 'rounded-r-2xl shadow-xs', sidebarOpen ? 'translate-x-0' : '-translate-x-64']"
     >
 
       <!-- Sidebar header -->
@@ -399,8 +399,8 @@
                       <span class="text-sm font-medium ml-4 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Messages</span>
                     </div>
                     <!-- Badge -->
-                    <div class="flex flex-shrink-0 ml-2">
+                    <div class="flex shrink-0 ml-2">
-                      <span class="inline-flex items-center justify-center h-5 text-xs font-medium text-white bg-violet-400 px-2 rounded">4</span>
+                      <span class="inline-flex items-center justify-center h-5 text-xs font-medium text-white bg-violet-400 px-2 rounded-sm">4</span>
                     </div>
                   </div>
                 </a>

src/partials/dashboard/DashboardCard01.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <div class="px-5 pt-5">
       <header class="flex justify-between items-start mb-2">
         <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Plus</h2>
@@ -36,7 +36,7 @@ import LineChart from '../../charts/LineChart01.vue'
 import EditMenu from '../../components/DropdownEditMenu.vue'
 
 // Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils'
+import { adjustColorOpacity, getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard01',
@@ -71,16 +71,16 @@ export default {
             const chart = context.chart;
             const {ctx, chartArea} = chart;
             return chartAreaGradient(ctx, chartArea, [
-              { stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
+              { stop: 0, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0) },
-              { stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
+              { stop: 1, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0.2) }
             ]);
           },
-          borderColor: tailwindConfig().theme.colors.violet[500],
+          borderColor: getCssVariable('--color-violet-500'),
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-          pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
+          pointBackgroundColor: getCssVariable('--color-violet-500'),
-          pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
+          pointHoverBackgroundColor: getCssVariable('--color-violet-500'),
           pointBorderWidth: 0,
           pointHoverBorderWidth: 0,          
           clip: 20,
@@ -94,12 +94,12 @@ export default {
             314, 314, 314, 388, 314, 202, 202,
             202, 202, 314, 720, 642,
           ],
-          borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          borderColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-          pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          pointBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
-          pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          pointHoverBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
           pointBorderWidth: 0,
           pointHoverBorderWidth: 0,               
           clip: 20,

src/partials/dashboard/DashboardCard02.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <div class="px-5 pt-5">
       <header class="flex justify-between items-start mb-2">
         <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Advanced</h2>
@@ -36,7 +36,7 @@ import LineChart from '../../charts/LineChart01.vue'
 import EditMenu from '../../components/DropdownEditMenu.vue'
 
 // Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils'
+import { adjustColorOpacity, getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard01',
@@ -71,16 +71,16 @@ export default {
             const chart = context.chart;
             const {ctx, chartArea} = chart;
             return chartAreaGradient(ctx, chartArea, [
-              { stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
+              { stop: 0, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0) },
-              { stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
+              { stop: 1, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0.2) }
             ]);
           },
-          borderColor: tailwindConfig().theme.colors.violet[500],
+          borderColor: getCssVariable('--color-violet-500'),
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-          pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
+          pointBackgroundColor: getCssVariable('--color-violet-500'),
-          pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
+          pointHoverBackgroundColor: getCssVariable('--color-violet-500'),
           pointBorderWidth: 0,
           pointHoverBorderWidth: 0,          
           clip: 20,
@@ -94,12 +94,12 @@ export default {
           154, 273, 191, 191, 126, 263, 349,
           252, 423, 622, 470, 532,
         ],
-          borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          borderColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-          pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          pointBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
-          pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          pointHoverBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
           pointBorderWidth: 0,
           pointHoverBorderWidth: 0,               
           clip: 20,

src/partials/dashboard/DashboardCard03.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <div class="px-5 pt-5">
       <header class="flex justify-between items-start mb-2">
         <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Acme Professional</h2>
@@ -36,7 +36,7 @@ import LineChart from '../../charts/LineChart01.vue'
 import EditMenu from '../../components/DropdownEditMenu.vue'
 
 // Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils'
+import { adjustColorOpacity, getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard01',
@@ -71,16 +71,16 @@ export default {
             const chart = context.chart;
             const {ctx, chartArea} = chart;
             return chartAreaGradient(ctx, chartArea, [
-              { stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
+              { stop: 0, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0) },
-              { stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
+              { stop: 1, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0.2) }
             ]);
           },
-          borderColor: tailwindConfig().theme.colors.violet[500],
+          borderColor: getCssVariable('--color-violet-500'),
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-          pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
+          pointBackgroundColor: getCssVariable('--color-violet-500'),
-          pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
+          pointHoverBackgroundColor: getCssVariable('--color-violet-500'),
           pointBorderWidth: 0,
           pointHoverBorderWidth: 0,          
           clip: 20,
@@ -94,12 +94,12 @@ export default {
             145, 145, 354, 260, 188, 188, 300,
             300, 282, 364, 660, 554,
           ],
-          borderColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          borderColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-          pointBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          pointBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
-          pointHoverBackgroundColor: `rgba(${hexToRGB(tailwindConfig().theme.colors.gray[500])}, 0.25)`,
+          pointHoverBackgroundColor: adjustColorOpacity(getCssVariable('--color-gray-500'), 0.25),
           pointBorderWidth: 0,
           pointHoverBorderWidth: 0,               
           clip: 20,

src/partials/dashboard/DashboardCard04.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Direct VS Indirect</h2>
     </header>
@@ -14,7 +14,7 @@ import { ref } from 'vue'
 import BarChart from '../../charts/BarChart01.vue'
 
 // Import utilities
-import { tailwindConfig } from '../../utils/Utils'
+import { getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard03',
@@ -34,8 +34,8 @@ export default {
           data: [
             800, 1600, 900, 1300, 1950, 1700,
           ],
-          backgroundColor: tailwindConfig().theme.colors.sky[500],
+          backgroundColor: getCssVariable('--color-sky-500'),
-          hoverBackgroundColor: tailwindConfig().theme.colors.sky[600],
+          hoverBackgroundColor: getCssVariable('--color-sky-600'),
           barPercentage: 0.7,
           categoryPercentage: 0.7,
           borderRadius: 4,
@@ -46,8 +46,8 @@ export default {
           data: [
             4900, 2600, 5350, 4800, 5200, 4800,
           ],
-          backgroundColor: tailwindConfig().theme.colors.violet[500],
+          backgroundColor: getCssVariable('--color-violet-500'),
-          hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
+          hoverBackgroundColor: getCssVariable('--color-violet-600'),
           barPercentage: 0.7,
           categoryPercentage: 0.7,
           borderRadius: 4,

src/partials/dashboard/DashboardCard05.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Real Time Value</h2>
       <Tooltip class="ml-2">
@@ -19,7 +19,7 @@ import { chartAreaGradient } from '../../charts/ChartjsConfig'
 import RealtimeChart from '../../charts/RealtimeChart.vue'
 
 // Import utilities
-import { tailwindConfig, hexToRGB } from '../../utils/Utils'
+import { adjustColorOpacity, getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard05',
@@ -95,15 +95,15 @@ export default {
               const chart = context.chart;
               const {ctx, chartArea} = chart;
               return chartAreaGradient(ctx, chartArea, [
-                { stop: 0, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0)` },
+                { stop: 0, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0) },
-                { stop: 1, color: `rgba(${hexToRGB(tailwindConfig().theme.colors.violet[500])}, 0.2)` }
+                { stop: 1, color: adjustColorOpacity(getCssVariable('--color-violet-500'), 0.2) }
               ]);
             },
-            borderColor: tailwindConfig().theme.colors.violet[500],
+            borderColor: getCssVariable('--color-violet-500'),
             borderWidth: 2,
             pointRadius: 0,
             pointHoverRadius: 3,
-            pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
+            pointBackgroundColor: getCssVariable('--color-violet-500'),
             clip: 20,
             tension: 0.2,
           },

src/partials/dashboard/DashboardCard06.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 xl:col-span-4 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Top Countries</h2>
     </header>
@@ -14,7 +14,7 @@ import { ref } from 'vue'
 import DoughnutChart from '../../charts/DoughnutChart.vue'
 
 // Import utilities
-import { tailwindConfig } from '../../utils/Utils'
+import { getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard06',
@@ -31,14 +31,14 @@ export default {
             35, 30, 35,
           ],
           backgroundColor: [
-            tailwindConfig().theme.colors.violet[500],
+            getCssVariable('--color-violet-500'),
-            tailwindConfig().theme.colors.sky[500],
+            getCssVariable('--color-sky-500'),
-            tailwindConfig().theme.colors.violet[800],
+            getCssVariable('--color-violet-800'),
           ],
           hoverBackgroundColor: [
-            tailwindConfig().theme.colors.violet[600],
+            getCssVariable('--color-violet-600'),
-            tailwindConfig().theme.colors.sky[600],
+            getCssVariable('--color-sky-600'),
-            tailwindConfig().theme.colors.violet[900],
+            getCssVariable('--color-violet-900'),
           ],
           borderWidth: 0,
         },

src/partials/dashboard/DashboardCard07.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="col-span-full xl:col-span-8 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="col-span-full xl:col-span-8 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Top Channels</h2>
     </header>
@@ -9,7 +9,7 @@
       <div class="overflow-x-auto">
         <table class="table-auto w-full dark:text-gray-300">
           <!-- Table header -->
-          <thead class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm">
+          <thead class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 rounded-xs">
             <tr>
               <th class="p-2">
                 <div class="font-semibold text-left">Source</div>

src/partials/dashboard/DashboardCard08.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Sales Over Time (all stores)</h2>
     </header>
@@ -11,11 +11,10 @@
 
 <script>
 import { ref } from 'vue'
-import { chartAreaGradient } from '../../charts/ChartjsConfig'
 import LineChart from '../../charts/LineChart02.vue'
 
 // Import utilities
-import { tailwindConfig } from '../../utils/Utils'
+import { getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard08',
@@ -45,13 +44,13 @@ export default {
             122, 110, 104, 152, 166, 233, 268,
             252, 284, 284, 333, 323,
           ],
-          borderColor: tailwindConfig().theme.colors.violet[500],
+          borderColor: getCssVariable('--color-violet-500'),
           fill: false,
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-        pointBackgroundColor: tailwindConfig().theme.colors.violet[500],
+        pointBackgroundColor: getCssVariable('--color-violet-500'),
-        pointHoverBackgroundColor: tailwindConfig().theme.colors.violet[500],
+        pointHoverBackgroundColor: getCssVariable('--color-violet-500'),
         pointBorderWidth: 0,
         pointHoverBorderWidth: 0,          
         clip: 20,
@@ -66,12 +65,12 @@ export default {
             276, 0, 124, 42, 124, 88, 88,
             215, 156, 88, 124, 64,
           ],
-          borderColor: tailwindConfig().theme.colors.sky[500],
+          borderColor: getCssVariable('--color-sky-500'),
           fill: false,
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-          pointBackgroundColor: tailwindConfig().theme.colors.sky[500],
+          pointBackgroundColor: getCssVariable('--color-sky-500'),
           clip: 20,
           tension: 0.2,
         },
@@ -84,12 +83,12 @@ export default {
             223, 188, 114, 162, 200, 150, 118,
             118, 76, 122, 230, 268,
           ],
-          borderColor: tailwindConfig().theme.colors.green[500],
+          borderColor: getCssVariable('--color-green-500'),
           fill: false,
           borderWidth: 2,
           pointRadius: 0,
           pointHoverRadius: 3,
-          pointBackgroundColor: tailwindConfig().theme.colors.green[500],
+          pointBackgroundColor: getCssVariable('--color-green-500'),
           clip: 20,
           tension: 0.2,
         },

src/partials/dashboard/DashboardCard09.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Sales VS Refunds</h2>
       <Tooltip class="ml-2" size="lg">
@@ -17,7 +17,7 @@
       <!-- Change the height attribute to adjust the chart height -->
       <BarChart :data="chartData" width="595" height="248" />
     </div>
-  </div>  
+  </div>
 </template>
 
 <script>
@@ -26,7 +26,7 @@ import Tooltip from '../../components/Tooltip.vue'
 import BarChart from '../../charts/BarChart02.vue'
 
 // Import utilities
-import { tailwindConfig } from '../../utils/Utils'
+import { getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard09',
@@ -47,11 +47,11 @@ export default {
           data: [
             6200, 9200, 6600, 8800, 5200, 9200,
           ],
-          backgroundColor: tailwindConfig().theme.colors.violet[500],
+          backgroundColor: getCssVariable('--color-violet-500'),
-          hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
+          hoverBackgroundColor: getCssVariable('--color-violet-600'),
-              barPercentage: 0.7,
+          barPercentage: 0.7,
-              categoryPercentage: 0.7,
+          categoryPercentage: 0.7,
-              borderRadius: 4,
+          borderRadius: 4,
         },
         // Blue bars
         {
@@ -59,8 +59,8 @@ export default {
           data: [
             -4000, -2600, -5350, -4000, -7500, -2000,
           ],
-          backgroundColor: tailwindConfig().theme.colors.violet[200],
+          backgroundColor: getCssVariable('--color-violet-200'),
-          hoverBackgroundColor: tailwindConfig().theme.colors.violet[300],
+          hoverBackgroundColor: getCssVariable('--color-violet-300'),
           barPercentage: 0.7,
           categoryPercentage: 0.7,
           borderRadius: 4,
@@ -70,7 +70,7 @@ export default {
 
     return {
       chartData,
-    } 
+    }
   }
 }
 </script>

src/partials/dashboard/DashboardCard10.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Customers</h2>
     </header>
@@ -9,7 +9,7 @@
       <div class="overflow-x-auto">
         <table class="table-auto w-full">
           <!-- Table header -->
-          <thead class="text-xs font-semibold uppercase dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50">
+          <thead class="text-xs font-semibold uppercase dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50">
             <tr>
               <th class="p-2 whitespace-nowrap">
                 <div class="font-semibold text-left">Name</div>

src/partials/dashboard/DashboardCard11.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="flex flex-col col-span-full sm:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60 flex items-center">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Reason for Refunds</h2>
     </header>
@@ -22,7 +22,7 @@ import { ref } from 'vue'
 import BarChart from '../../charts/BarChart03.vue'
 
 // Import utilities
-import { tailwindConfig } from '../../utils/Utils'
+import { getCssVariable } from '../../utils/Utils'
 
 export default {
   name: 'DashboardCard11',
@@ -36,40 +36,40 @@ export default {
         {
           label: 'Having difficulties using the product',
           data: [131],
-          backgroundColor: tailwindConfig().theme.colors.violet[500],
+          backgroundColor: getCssVariable('--color-violet-500'),
-          hoverBackgroundColor: tailwindConfig().theme.colors.violet[600],
+          hoverBackgroundColor: getCssVariable('--color-violet-600'),
           barPercentage: 1,
           categoryPercentage: 1,
         },
         {
           label: 'Missing features I need',
           data: [100],
-          backgroundColor: tailwindConfig().theme.colors.violet[700],
+          backgroundColor: getCssVariable('--color-violet-700'),
-          hoverBackgroundColor: tailwindConfig().theme.colors.violet[800],
+          hoverBackgroundColor: getCssVariable('--color-violet-800'),
           barPercentage: 1,
           categoryPercentage: 1,
         },
         {
           label: 'Not satisfied about the quality of the product',
           data: [81],
-          backgroundColor: tailwindConfig().theme.colors['sky'][500],
+          backgroundColor: getCssVariable('--color-sky-500'),
-          hoverBackgroundColor: tailwindConfig().theme.colors['sky'][600],
+          hoverBackgroundColor: getCssVariable('--color-sky-600'),
           barPercentage: 1,
           categoryPercentage: 1,
         },
         {
           label: 'The product doesn’t look as advertised',
           data: [65],
-          backgroundColor: tailwindConfig().theme.colors.green[500],
+          backgroundColor: getCssVariable('--color-green-500'),
-          hoverBackgroundColor: tailwindConfig().theme.colors.green[600],
+          hoverBackgroundColor: getCssVariable('--color-green-600'),
           barPercentage: 1,
           categoryPercentage: 1,
         },
         {
           label: 'Other',
           data: [72],
-          backgroundColor: tailwindConfig().theme.colors.gray[200],
+          backgroundColor: getCssVariable('--color-gray-200'),
-          hoverBackgroundColor: tailwindConfig().theme.colors.gray[300],
+          hoverBackgroundColor: getCssVariable('--color-gray-300'),
           barPercentage: 1,
           categoryPercentage: 1,
         },

src/partials/dashboard/DashboardCard12.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Recent Activity</h2>
     </header>
@@ -8,7 +8,7 @@
       <!-- Card content -->
       <!-- "Today" group -->
       <div>
-        <header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
+        <header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 rounded-xs font-semibold p-2">Today</header>
         <ul class="my-1">
           <!-- Item -->
           <li class="flex px-2">
@@ -62,7 +62,7 @@
       </div>
       <!-- "Yesterday" group -->
       <div>
-        <header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Yesterday</header>
+        <header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 rounded-xs font-semibold p-2">Yesterday</header>
         <ul class="my-1">
           <!-- Item -->
           <li class="flex px-2">
@@ -105,6 +105,6 @@
 
 <script>
 export default {
-  name: 'DashboardCard12',
+  name: 'DashboardCard10',
 }
 </script>

src/partials/dashboard/DashboardCard13.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-sm rounded-xl">
+  <div class="col-span-full xl:col-span-6 bg-white dark:bg-gray-800 shadow-xs rounded-xl">
     <header class="px-5 py-4 border-b border-gray-100 dark:border-gray-700/60">
       <h2 class="font-semibold text-gray-800 dark:text-gray-100">Income/Expenses</h2>
     </header>
@@ -8,7 +8,7 @@
       <!-- Card content -->
       <!-- "Today" group -->
       <div>
-        <header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 dark:bg-opacity-50 rounded-sm font-semibold p-2">Today</header>
+        <header class="text-xs uppercase text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 rounded-xs font-semibold p-2">Today</header>
         <ul class="my-1">
           <!-- Item -->
           <li class="flex px-2">
@@ -115,6 +115,6 @@
 
 <script>
 export default {
-  name: 'DashboardCard113',
+  name: 'DashboardCard11',
 }
 </script>

src/utils/Utils.js

@@ -1,26 +1,3 @@
-import resolveConfig from 'tailwindcss/resolveConfig';
-import tailwindConfigFile from '@tailwindConfig'
-
-export const tailwindConfig = () => {
-  return resolveConfig(tailwindConfigFile)
-}
-
-export const hexToRGB = (h) => {
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  if (h.length === 4) {
-    r = `0x${h[1]}${h[1]}`;
-    g = `0x${h[2]}${h[2]}`;
-    b = `0x${h[3]}${h[3]}`;
-  } else if (h.length === 7) {
-    r = `0x${h[1]}${h[2]}`;
-    g = `0x${h[3]}${h[4]}`;
-    b = `0x${h[5]}${h[6]}`;
-  }
-  return `${+r},${+g},${+b}`;
-};
-
 export const formatValue = (value) => Intl.NumberFormat('en-US', {
   style: 'currency',
   currency: 'USD',
@@ -32,3 +9,55 @@ export const formatThousands = (value) => Intl.NumberFormat('en-US', {
   maximumSignificantDigits: 3,
   notation: 'compact',
 }).format(value);
+
+export const getCssVariable = (variable) => {
+  return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+};
+
+const adjustHexOpacity = (hexColor, opacity) => {
+  // Remove the '#' if it exists
+  hexColor = hexColor.replace('#', '');
+
+  // Convert hex to RGB
+  const r = parseInt(hexColor.substring(0, 2), 16);
+  const g = parseInt(hexColor.substring(2, 4), 16);
+  const b = parseInt(hexColor.substring(4, 6), 16);
+
+  // Return RGBA string
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
+const adjustHSLOpacity = (hslColor, opacity) => {
+  // Convert HSL to HSLA
+  return hslColor.replace('hsl(', 'hsla(').replace(')', `, ${opacity})`);
+};
+
+const adjustOKLCHOpacity = (oklchColor, opacity) => {
+  // Add alpha value to OKLCH color
+  return oklchColor.replace(/oklch\((.*?)\)/, (match, p1) => `oklch(${p1} / ${opacity})`);
+};
+
+export const adjustColorOpacity = (color, opacity) => {
+  if (color.startsWith('#')) {
+    return adjustHexOpacity(color, opacity);
+  } else if (color.startsWith('hsl')) {
+    return adjustHSLOpacity(color, opacity);
+  } else if (color.startsWith('oklch')) {
+    return adjustOKLCHOpacity(color, opacity);
+  } else {
+    throw new Error('Unsupported color format');
+  }
+};
+
+export const oklchToRGBA = (oklchColor) => {
+  // Create a temporary div to use for color conversion
+  const tempDiv = document.createElement('div');
+  tempDiv.style.color = oklchColor;
+  document.body.appendChild(tempDiv);
+  
+  // Get the computed style and convert to RGB
+  const computedColor = window.getComputedStyle(tempDiv).color;
+  document.body.removeChild(tempDiv);
+  
+  return computedColor;
+};

tailwind.config.js

@@ -1,139 +0,0 @@
-import plugin from "tailwindcss/plugin";
-import forms from '@tailwindcss/forms';
-
-export default {
-  content: [
-    './index.html',
-    './src/**/*.{vue,js,ts,jsx,tsx}',
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        gray: {
-          50: '#F9FAFB',
-          100: '#F3F4F6',
-          200: '#E5E7EB',
-          300: '#BFC4CD',
-          400: '#9CA3AF',
-          500: '#6B7280',
-          600: '#4B5563',
-          700: '#374151',
-          800: '#1F2937',
-          900: '#111827',
-          950: '#030712',
-        },
-        violet: {
-          50: '#F1EEFF',
-          100: '#E6E1FF',
-          200: '#D2CBFF',
-          300: '#B7ACFF',
-          400: '#9C8CFF',
-          500: '#8470FF',
-          600: '#755FF8',
-          700: '#5D47DE',
-          800: '#4634B1',
-          900: '#2F227C',
-          950: '#1C1357',
-        },
-        sky: {
-          50: '#E3F3FF',
-          100: '#D1ECFF',
-          200: '#B6E1FF',
-          300: '#A0D7FF',
-          400: '#7BC8FF',
-          500: '#67BFFF',
-          600: '#56B1F3',
-          700: '#3193DA',
-          800: '#1C71AE',
-          900: '#124D79',
-          950: '#0B324F',
-        },
-        green: {
-          50: '#D2FFE2',
-          100: '#B1FDCD',
-          200: '#8BF0B0',
-          300: '#67E294',
-          400: '#4BD37D',
-          500: '#3EC972',
-          600: '#34BD68',
-          700: '#239F52',
-          800: '#15773A',
-          900: '#0F5429',
-          950: '#0A3F1E',
-        },
-        red: {
-          50: '#FFE8E8',
-          100: '#FFD1D1',
-          200: '#FFB2B2',
-          300: '#FF9494',
-          400: '#FF7474',
-          500: '#FF5656',
-          600: '#FA4949',
-          700: '#E63939',
-          800: '#C52727',
-          900: '#941818',
-          950: '#600F0F',
-        },
-        yellow: {
-          50: '#FFF2C9',
-          100: '#FFE7A0',
-          200: '#FFE081',
-          300: '#FFD968',
-          400: '#F7CD4C',
-          500: '#F0BB33',
-          600: '#DFAD2B',
-          700: '#BC9021',
-          800: '#816316',
-          900: '#4F3D0E',
-          950: '#342809',
-        },
-      },
-      fontFamily: {
-        inter: ['Inter', 'sans-serif'],
-      },
-      fontSize: {
-        xs: ['0.75rem', { lineHeight: '1.5' }],
-        sm: ['0.875rem', { lineHeight: '1.5715' }],
-        base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
-        lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
-        xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
-        '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
-        '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
-        '4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
-        '5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
-        '6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }],
-      },
-      screens: {
-        xs: '480px',
-      },
-      borderWidth: {
-        3: '3px',
-      },
-      minWidth: {
-        36: '9rem',
-        44: '11rem',
-        56: '14rem',
-        60: '15rem',
-        72: '18rem',
-        80: '20rem',
-      },
-      maxWidth: {
-        '8xl': '88rem',
-        '9xl': '96rem',
-      },
-      zIndex: {
-        60: '60',
-      },
-    },
-  },
-  plugins: [
-    forms,
-    // add custom variant for expanding sidebar
-    plugin(({ addVariant, e }) => {
-      addVariant('sidebar-expanded', ({ modifySelectors, separator }) => {
-        modifySelectors(({ className }) => `.sidebar-expanded .${e(`sidebar-expanded${separator}${className}`)}`);
-      });
-    }),
-  ],
-};

vite.config.js

@@ -1,4 +1,3 @@
-import path from 'path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
@@ -8,16 +7,6 @@ export default defineConfig({
     'process.env': process.env
   },
   plugins: [vue()],
-  resolve: {
-    alias: {
-      '@tailwindConfig': path.resolve(__dirname, 'tailwind.config.js'),
-    },
-  },
-  optimizeDeps: {
-    include: [
-      '@tailwindConfig',
-    ]
-  },  
   build: {
     commonjsOptions: {
       transformMixedEsModules: true,