Upgrade to tailwindcss v3

2025-12-08 22:53:24 +00:00 · 2021-12-10 13:38:19 +02:00
parent 30ec6c2f48
commit b9e22969cf
8 changed files with 348 additions and 691 deletions
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
--- a/components/ui/Footers/WithCta.vue
+++ b/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>
--- a/components/ui/Footers/WithLinks.vue
+++ b/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>
--- a/components/ui/Sidebar/WithSearch.vue
+++ b/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">
--- a/nuxt.config.js
+++ b/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' },
-      { 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.' },
+            { 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: "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: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap' }
-    ]
+            { 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: [
-  ],
+    css: ["@/assets/css/app.css"],

    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
-    '~/plugins/vue-clipboard'
-  ],
+    plugins: ["~/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: [
-    '@nuxtjs/tailwindcss',
-    '@nuxtjs/google-analytics'
-  ],
+    buildModules: ["@nuxt/postcss8", "@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: {},
+            },
+        },
+    },
+};
--- a/package.json
+++ b/package.json
@@ -14,14 +14,14 @@
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
-    "@nuxtjs/tailwindcss": "^4.1.2",
-    "autoprefixer": "^10.2.6",
+    "@nuxt/postcss8": "^1.1.3",
+    "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"
  },
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,9 @@
 const colors = require("tailwindcss/colors");

 module.exports = {
-    purge: [
-        "./components/**/*.{vue,js}",
+    content: [
+        "./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: [],
 };
--- a/yarn.lock
+++ b/yarn.lock