Upgrade to tailwindcss v2 (#29)

* Update tailwindcss version * Update utility classes * Add colors note
2025-12-08 14:43:23 +00:00 · 2020-11-25 20:33:05 +02:00
parent b2ff3696ca
commit bc3b817ab7
7 changed files with 138 additions and 19 deletions
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
    "core-js": "^3.6.4",
    "highlight.js": "^10.0.2",
    "postcss-import": "^12.0.1",
-    "tailwindcss": "^1.8.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
    "vue": "^2.6.11",
    "vue-analytics": "^5.22.1",
    "vue-backtotop": "^1.6.1",
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -13,6 +13,7 @@
            </div>

            <p class="mt-8 text-gray-700 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 hover:underline"> configuration</a></p>
+            <p class="mt-4 text-gray-700 text-center underline">Note Meraki UI use Tailwindcss V1 color we are working to Support V2 colors</p>
        </div>

        <div class="w-full max-w-6xl mx-auto">
--- a/src/components/ui/Authentication/LoginWithSideImage.vue
+++ b/src/components/ui/Authentication/LoginWithSideImage.vue
@@ -32,7 +32,7 @@

                    <div class="mt-4">
                        <label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
-                        <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email">
+                        <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="email">
                    </div>

                    <div class="mt-4">
@@ -41,7 +41,7 @@
                            <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
                        </div>

-                        <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password">
+                        <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="password">
                    </div>

                    <div class="mt-8">
@@ -100,7 +100,7 @@

                <div class="mt-4">
                    <label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
-                    <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email">
+                    <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="email">
                </div>

                <div class="mt-4">
@@ -109,7 +109,7 @@
                        <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
                    </div>

-                    <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password">
+                    <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="password">
                </div>

                <div class="mt-8">
--- a/src/components/ui/Authentication/SimpleLogin.vue
+++ b/src/components/ui/Authentication/SimpleLogin.vue
@@ -11,11 +11,11 @@

                    <form>
                        <div class="mt-4 w-full">
-                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email" placeholder="Email Address" aria-label="Email Address">
+                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
                        </div>

                        <div class="mt-4 w-full">
-                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password" placeholder="Password" aria-label="Password">
+                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                        </div>

                        <div class="flex justify-between items-center mt-4">
@@ -54,11 +54,11 @@

                <form>
                    <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email" placeholder="Email Address" aria-label="Email Address">
+                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
                    </div>

                    <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password" placeholder="Password" aria-label="Password">
+                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                    </div>

                    <div class="flex justify-between items-center mt-4">
--- a/src/components/ui/Forms/Simple.vue
+++ b/src/components/ui/Forms/Simple.vue
@@ -8,22 +8,22 @@
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
                        <div>
                            <label class="text-gray-700" for="username">Username</label>
-                            <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                            <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                        </div>

                        <div>
                            <label class="text-gray-700" for="emailAddress">Email Address</label>
-                            <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                            <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                        </div>

                        <div>
                            <label class="text-gray-700" for="password">Password</label>
-                            <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                            <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                        </div>

                        <div>
                            <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                            <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                            <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                        </div>
                    </div>

@@ -49,22 +49,22 @@
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
                    <div>
                        <label class="text-gray-700" for="username">Username</label>
-                        <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                        <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                    </div>

                    <div>
                        <label class="text-gray-700" for="emailAddress">Email Address</label>
-                        <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                        <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                    </div>

                    <div>
                        <label class="text-gray-700" for="password">Password</label>
-                        <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                        <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                    </div>

                    <div>
                        <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                        <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
+                        <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
                    </div>
                </div>

--- a/src/components/ui/Navbars/WithCategories.vue
+++ b/src/components/ui/Navbars/WithCategories.vue
@@ -45,7 +45,7 @@
                        </div>
                    </div>

-                    <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-no-wrap scroll-hidden">
+                    <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
@@ -132,7 +132,7 @@
                    </div>
                </div>

-                <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-no-wrap scroll-hidden">
+                <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,124 @@ module.exports = {
                128: "32rem",
            },
        },
+        colors: {
+            transparent: "transparent",
+            current: "currentColor",
+
+            black: "#000",
+            white: "#fff",
+
+            gray: {
+                100: "#f7fafc",
+                200: "#edf2f7",
+                300: "#e2e8f0",
+                400: "#cbd5e0",
+                500: "#a0aec0",
+                600: "#718096",
+                700: "#4a5568",
+                800: "#2d3748",
+                900: "#1a202c",
+            },
+            red: {
+                100: "#fff5f5",
+                200: "#fed7d7",
+                300: "#feb2b2",
+                400: "#fc8181",
+                500: "#f56565",
+                600: "#e53e3e",
+                700: "#c53030",
+                800: "#9b2c2c",
+                900: "#742a2a",
+            },
+            orange: {
+                100: "#fffaf0",
+                200: "#feebc8",
+                300: "#fbd38d",
+                400: "#f6ad55",
+                500: "#ed8936",
+                600: "#dd6b20",
+                700: "#c05621",
+                800: "#9c4221",
+                900: "#7b341e",
+            },
+            yellow: {
+                100: "#fffff0",
+                200: "#fefcbf",
+                300: "#faf089",
+                400: "#f6e05e",
+                500: "#ecc94b",
+                600: "#d69e2e",
+                700: "#b7791f",
+                800: "#975a16",
+                900: "#744210",
+            },
+            green: {
+                100: "#f0fff4",
+                200: "#c6f6d5",
+                300: "#9ae6b4",
+                400: "#68d391",
+                500: "#48bb78",
+                600: "#38a169",
+                700: "#2f855a",
+                800: "#276749",
+                900: "#22543d",
+            },
+            teal: {
+                100: "#e6fffa",
+                200: "#b2f5ea",
+                300: "#81e6d9",
+                400: "#4fd1c5",
+                500: "#38b2ac",
+                600: "#319795",
+                700: "#2c7a7b",
+                800: "#285e61",
+                900: "#234e52",
+            },
+            blue: {
+                100: "#ebf8ff",
+                200: "#bee3f8",
+                300: "#90cdf4",
+                400: "#63b3ed",
+                500: "#4299e1",
+                600: "#3182ce",
+                700: "#2b6cb0",
+                800: "#2c5282",
+                900: "#2a4365",
+            },
+            indigo: {
+                100: "#ebf4ff",
+                200: "#c3dafe",
+                300: "#a3bffa",
+                400: "#7f9cf5",
+                500: "#667eea",
+                600: "#5a67d8",
+                700: "#4c51bf",
+                800: "#434190",
+                900: "#3c366b",
+            },
+            purple: {
+                100: "#faf5ff",
+                200: "#e9d8fd",
+                300: "#d6bcfa",
+                400: "#b794f4",
+                500: "#9f7aea",
+                600: "#805ad5",
+                700: "#6b46c1",
+                800: "#553c9a",
+                900: "#44337a",
+            },
+            pink: {
+                100: "#fff5f7",
+                200: "#fed7e2",
+                300: "#fbb6ce",
+                400: "#f687b3",
+                500: "#ed64a6",
+                600: "#d53f8c",
+                700: "#b83280",
+                800: "#97266d",
+                900: "#702459",
+            },
+        },
    },
    variants: {
        transitionProperty: ({ after }) => after(["motion-reduce"]),