Upgrade to tailwindcss v3

components/ui/Footers/WithCta.vue

@@ -21,7 +21,7 @@
                         </div>
                     </div>
 
-                    <hr class="my-10 dark:border-gray-700" />
+                    <hr class="my-10 border-gray-200 dark:border-gray-700" />
 
                     <div class="flex flex-col items-center sm:flex-row sm:justify-between">
                         <p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>
@@ -66,7 +66,7 @@
                 </div>
                 </div>
 
-                <hr class="my-10 dark:border-gray-500" />
+                <hr class="my-10 border-gray-200 dark:border-gray-700" />
 
                 <div class="flex flex-col items-center sm:flex-row sm:justify-between">
                 <p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>

components/ui/Footers/WithLinks.vue

@@ -145,7 +145,7 @@
                         </div>
                     </div>
 
-                    <hr class="my-10 dark:border-gray-700">
+                    <hr class="my-10 border-gray-200 dark:border-gray-700">
 
                     <div class="sm:flex sm:items-center sm:justify-between">
                         <p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>
@@ -336,7 +336,7 @@
                     </div>
                 </div>
 
-                <hr class="my-10 dark:border-gray-700">
+                <hr class="my-10 border-gray-200 dark:border-gray-700">
 
                 <div class="sm:flex sm:items-center sm:justify-between">
                     <p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>

components/ui/Sidebar/WithSearch.vue

@@ -50,7 +50,7 @@
                             <span class="mx-4 font-medium">Settings</span>
                         </a>
 
-                        <hr class="my-6 dark:border-gray-600" />
+                        <hr class="my-6 border-gray-200 dark:border-gray-600" />
 
                         <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
                             <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -135,7 +135,7 @@
                         <span class="mx-4 font-medium">Settings</span>
                     </a>
 
-                    <hr class="my-6 dark:border-gray-600" />
+                    <hr class="my-6 border-gray-200 dark:border-gray-600" />
 
                     <a class="flex items-center px-4 py-2 mt-5 text-gray-600 transition-colors duration-200 transform rounded-md dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700" href="#">
                         <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

nuxt.config.js

@@ -1,78 +1,106 @@
 export default {
-  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
+    // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
-  ssr: false,
+    ssr: false,
 
-  // Target: https://go.nuxtjs.dev/config-target
+    // Target: https://go.nuxtjs.dev/config-target
-  target: 'static',
+    target: "static",
 
-  googleAnalytics: {
+    googleAnalytics: {
-    id: "UA-167213766-1"
+        id: "UA-167213766-1",
-  },
-
-  // Global page headers: https://go.nuxtjs.dev/config-head
-  head: {
-    title: 'Meraki UI Tailwind CSS Components',
-    htmlAttrs: {
-      lang: 'en'
     },
-    meta: [
+
-      { charset: 'utf-8' },
+    // Global page headers: https://go.nuxtjs.dev/config-head
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    head: {
-      { hid: 'description', name: 'description', content: 'Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.' },
+        title: "Meraki UI Tailwind CSS Components",
-      { name: "twitter:card", content: "summary_large_image" },
+        htmlAttrs: {
-      { hid: "twitter:title", name: "twitter:title", content: "Meraki UI Tailwind CSS Components" },
+            lang: "en",
-      {
+        },
-        hid: "twitter:description",
+        meta: [
-        name: "twitter:description",
+            { charset: "utf-8" },
-        content:
+            {
-          "Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
+                name: "viewport",
-      },
+                content: "width=device-width, initial-scale=1",
-      { hid: "twitter:image", name: "twitter:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/images/thumbnail.png' },
+            },
-      { hid: "og:title", property: "og:title", content: "Meraki UI Tailwind CSS Components" },
+            {
-      { property: "og:site_name", content: "Meraki UI" },
+                hid: "description",
-      { hid: "og:type", property: "og:type", content: "website" },
+                name: "description",
-      { hid: "og:image", property: "og:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/images/thumbnail.png' },
+                content:
-      {
+                    "Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
-        hid: "og:description",
+            },
-        property: "og:description",
+            { name: "twitter:card", content: "summary_large_image" },
-        content:
+            {
-          "Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
+                hid: "twitter:title",
-      },
+                name: "twitter:title",
+                content: "Meraki UI Tailwind CSS Components",
+            },
+            {
+                hid: "twitter:description",
+                name: "twitter:description",
+                content:
+                    "Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
+            },
+            {
+                hid: "twitter:image",
+                name: "twitter:image",
+                content:
+                    "https://raw.githubusercontent.com/bakateam/merakiui/main/assets/images/thumbnail.png",
+            },
+            {
+                hid: "og:title",
+                property: "og:title",
+                content: "Meraki UI Tailwind CSS Components",
+            },
+            { property: "og:site_name", content: "Meraki UI" },
+            { hid: "og:type", property: "og:type", content: "website" },
+            {
+                hid: "og:image",
+                property: "og:image",
+                content:
+                    "https://raw.githubusercontent.com/bakateam/merakiui/main/assets/images/thumbnail.png",
+            },
+            {
+                hid: "og:description",
+                property: "og:description",
+                content:
+                    "Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
+            },
+        ],
+        link: [
+            { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
+            {
+                rel: "stylesheet",
+                href: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap",
+            },
+        ],
+    },
+
+    // Global CSS: https://go.nuxtjs.dev/config-css
+    css: ["@/assets/css/app.css"],
+
+    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+    plugins: ["~/plugins/vue-clipboard"],
+
+    // Auto import components: https://go.nuxtjs.dev/config-components
+    components: [
+        {
+            path: "~/components",
+            pathPrefix: false,
+        },
     ],
-    link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
-      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap' }
-    ]
-  },
 
-  // Global CSS: https://go.nuxtjs.dev/config-css
+    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
-  css: [
+    buildModules: ["@nuxt/postcss8", "@nuxtjs/google-analytics"],
-  ],
 
-  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+    // Modules: https://go.nuxtjs.dev/config-modules
-  plugins: [
+    modules: [],
-    '~/plugins/vue-clipboard'
-  ],
 
-  // Auto import components: https://go.nuxtjs.dev/config-components
+    // Build Configuration: https://go.nuxtjs.dev/config-build
-  components: [
+    build: {
-    {
+        postcss: {
-      path: '~/components',
+            plugins: {
-      pathPrefix: false,
+                tailwindcss: {},
+                autoprefixer: {},
+            },
+        },
     },
-  ],
+};
-
-  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
-  buildModules: [
-    '@nuxtjs/tailwindcss',
-    '@nuxtjs/google-analytics'
-  ],
-
-  // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [
-  ],
-
-  // Build Configuration: https://go.nuxtjs.dev/config-build
-  build: {
-  }
-}

package.json

@@ -14,14 +14,14 @@
     "nuxt": "^2.14.12"
   },
   "devDependencies": {
-    "@nuxtjs/tailwindcss": "^4.1.2",
+    "@nuxt/postcss8": "^1.1.3",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.4.0",
     "highlight.js": "^10.6.0",
     "husky": "^5.0.9",
     "lint-staged": "^10.5.4",
-    "postcss": "^8.3.0",
+    "postcss": "^8.4.4",
     "prettier": "^2.2.1",
-    "tailwindcss": "^2.1.2",
+    "tailwindcss": "^3.0.0",
     "vue-backtotop": "^1.6.1",
     "vue-clipboard2": "^0.3.1"
   },

tailwind.config.js

@@ -1,8 +1,9 @@
 const colors = require("tailwindcss/colors");
 
 module.exports = {
-    purge: [
+    content: [
-        "./components/**/*.{vue,js}",
+        "./components/**/*.{js,vue,ts}",
+        "./layouts/**/*.vue",
         "./pages/**/*.vue",
         "./plugins/**/*.{js,ts}",
         "./nuxt.config.{js,ts}",
@@ -24,9 +25,6 @@ module.exports = {
             animation: {
                 float: "float 4s ease-in-out infinite",
             },
-            colors: {
-                teal: colors.teal,
-            },
             fontFamily: {
                 roboto: ["Roboto", "sans-serif"],
             },
@@ -37,8 +35,5 @@ module.exports = {
             },
         },
     },
-    variants: {
-        extend: {},
-    },
     plugins: [],
 };