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
@@ -1,78 +1,106 @@
 export default {
-  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
-  ssr: false,
+    // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
+    ssr: false,

-  // Target: https://go.nuxtjs.dev/config-target
-  target: 'static',
+    // Target: https://go.nuxtjs.dev/config-target
+    target: "static",

-  googleAnalytics: {
-    id: "UA-167213766-1"
-  },
-
-  // Global page headers: https://go.nuxtjs.dev/config-head
-  head: {
-    title: 'Meraki UI Tailwind CSS Components',
-    htmlAttrs: {
-      lang: 'en'
+    googleAnalytics: {
+        id: "UA-167213766-1",
    },
-    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.' },
-      { name: "twitter:card", content: "summary_large_image" },
-      { 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.",
-      },
+
+    // Global page headers: https://go.nuxtjs.dev/config-head
+    head: {
+        title: "Meraki UI Tailwind CSS Components",
+        htmlAttrs: {
+            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.",
+            },
+            { name: "twitter:card", content: "summary_large_image" },
+            {
+                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
-  css: [
-  ],
+    // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+    buildModules: ["@nuxt/postcss8", "@nuxtjs/google-analytics"],

-  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
-  plugins: [
-    '~/plugins/vue-clipboard'
-  ],
+    // Modules: https://go.nuxtjs.dev/config-modules
+    modules: [],

-  // Auto import components: https://go.nuxtjs.dev/config-components
-  components: [
-    {
-      path: '~/components',
-      pathPrefix: false,
+    // Build Configuration: https://go.nuxtjs.dev/config-build
+    build: {
+        postcss: {
+            plugins: {
+                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: {
-  }
-}
+};
--- 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