Merge pull request #57 from merakiui/tailwindcss-v3

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

@@ -3,35 +3,61 @@ export default {
     ssr: false,
 
     // Target: https://go.nuxtjs.dev/config-target
-  target: 'static',
+    target: "static",
 
     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',
+        title: "Meraki UI Tailwind CSS Components",
         htmlAttrs: {
-      lang: 'en'
+            lang: "en",
         },
         meta: [
-      { charset: 'utf-8' },
+            { charset: "utf-8" },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+            {
-      { hid: 'description', name: 'description', 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: "description",
+                name: "description",
+                content:
+                    "Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
+            },
             { name: "twitter:card", content: "summary_large_image" },
-      { hid: "twitter:title", name: "twitter:title", content: "Meraki UI Tailwind CSS Components" },
+            {
+                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" },
+                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:image",
+                property: "og:image",
+                content:
+                    "https://raw.githubusercontent.com/bakateam/merakiui/main/assets/images/thumbnail.png",
+            },
             {
                 hid: "og:description",
                 property: "og:description",
@@ -40,39 +66,41 @@ export default {
             },
         ],
         link: [
-      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+            { 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' }
+            {
-    ]
+                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: [
+    css: ["@/assets/css/app.css"],
-  ],
 
     // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
+    plugins: ["~/plugins/vue-clipboard"],
-    '~/plugins/vue-clipboard'
-  ],
 
     // Auto import components: https://go.nuxtjs.dev/config-components
     components: [
         {
-      path: '~/components',
+            path: "~/components",
             pathPrefix: false,
         },
     ],
 
     // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
-  buildModules: [
+    buildModules: ["@nuxt/postcss8", "@nuxtjs/google-analytics"],
-    '@nuxtjs/tailwindcss',
-    '@nuxtjs/google-analytics'
-  ],
 
     // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [
+    modules: [],
-  ],
 
     // Build Configuration: https://go.nuxtjs.dev/config-build
     build: {
-  }
+        postcss: {
-}
+            plugins: {
+                tailwindcss: {},
+                autoprefixer: {},
+            },
+        },
+    },
+};

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: [],
 };