feat: add tailwind module to playground, fix layout colors and styles

driss-chelouati · driss-chelouati · commit c02578b45b9e · 2022-09-27T14:07:39.000+01:00
diff --git a/.eslintrc b/.eslintrc
@@ -13,21 +13,19 @@
   "rules": {
     "no-console": "off",
     "no-debugger": "off",
+    "prefer-arrow-callback": "off",
     "vue/script-setup-uses-vars": "error",
     "vue/multi-word-component-names": "off",
     "vue/define-macros-order": "off",
-    "tailwindcss/no-custom-classname": [
-      "error",
-      { "whitelist": ["^ninja-(.*)$"] }
-    ],
+    "tailwindcss/no-custom-classname": "off",
     "tailwindcss/classnames-order": "off",
     "prettier-vue/prettier": [
       "error",
       {
         "printWidth": 80,
         "singleQuote": true,
         "semi": false,
-        "trailingComma": "none"
+        // "trailingComma": "none"
       }
     ]
   }
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@antfu/eslint-config": "^0.27.0",
     "@nuxt/module-builder": "latest",
     "@nuxt/schema": "^3.0.0-rc.11",
+    "@nuxtjs/tailwindcss": "^5.3.3",
     "eslint": "8.24.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier-vue": "4.2.0",
diff --git a/playground/assets/css/main.css b/playground/assets/css/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/playground/components/Hero.vue b/playground/components/Hero.vue
@@ -1,28 +1,40 @@
 <template>
   <section
-    class="min-h-screen w-full overflow-hidden bg-stone-100 dark:bg-stone-900"
+    class="min-h-screen w-full overflow-hidden bg-muted-100 dark:bg-muted-900 ltablet:bg-red"
   >
     <div
       class="relative mx-auto flex min-h-screen w-full max-w-7xl flex-col justify-between px-4 pt-24"
     >
       <!-- Toasts -->
-      <div class="absolute top-40 left-20 z-10">
+      <div
+        class="hidden md:block absolute top-40 left-20 ptablet:translate-y-96 ltablet:left-1 lg:left-20 z-10"
+      >
         <ToastIconSuccess />
       </div>
-      <div class="absolute top-64 left-6 z-10">
+      <div
+        class="hidden md:block absolute top-64 left-6 ptablet:translate-y-96 ltablet:-left-7 lg:left-6 z-10"
+      >
         <ToastLabelInfo />
       </div>
-      <div class="absolute top-[350px] left-24 z-10">
+      <div
+        class="hidden md:block absolute top-[350px] left-24 ptablet:translate-y-96 ltablet:left-5 lg:left-24 z-10"
+      >
         <ToastIconSoloDanger />
       </div>
 
-      <div class="absolute top-40 right-20 z-10">
+      <div
+        class="absolute bottom-64 md:top-40 right-20 ptablet:translate-y-96 ltablet:right-1 lg:right-20 z-10"
+      >
         <ToastUserReplyClose />
       </div>
-      <div class="absolute top-64 right-6 z-10">
+      <div
+        class="absolute bottom-44 md:top-64 right-6 ptablet:translate-y-96 ltablet:-right-7 lg:right-6 z-10"
+      >
         <ToastLabelSuccess />
       </div>
-      <div class="absolute top-[350px] right-24 z-10">
+      <div
+        class="absolute bottom-[95px] md:top-[350px] ptablet:translate-y-96 right-24 ltablet:right-5 lg:right-24 z-10"
+      >
         <ToastActionButtons />
       </div>
 
@@ -35,26 +47,32 @@
                 >Nuxt 3 Ready</span
               >
             </p>
-            <h1 class="font-extrabold text-5xl text-stone-800 mb-2">
+            <h1
+              class="font-extrabold text-5xl text-muted-800 dark:text-white mb-2"
+            >
               Nuxt Toaster
             </h1>
-            <p class="text-lg text-stone-500 pb-3 border-b border-stone-200">
+            <p
+              class="text-lg text-muted-500 pb-3 border-b border-muted-200 dark:border-muted-800"
+            >
               <span class="mr-2">🔔</span> A simple toaster (notifier) handler
               for Nuxt.js
             </p>
           </div>
           <!-- Copy input -->
-          <div class="group relative w-full max-w-md mx-auto mt-4">
+          <div
+            class="group relative w-full flex flex-col gap-3 ptablet:max-w-md ltablet:max-w-sm lg:max-w-md mx-auto mt-4"
+          >
             <input
               type="text"
-              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-stone-600 bg-white border border-stone-200 group-hover:shadow-xl group-hover:shadow-stone-400/10 dark:group-hover:shadow-stone-800/10 transition-all duration-300"
+              class="w-full h-14 pl-14 pr-4 py-2 rounded-xl font-mono text-muted-600 dark:text-muted-400 bg-white dark:bg-muted-1000 border border-muted-200 dark:border-muted-800 group-hover:shadow-xl group-hover:shadow-muted-400/10 dark:group-hover:shadow-muted-800/10 transition-all duration-300"
               value="npm i -D @cssninja/nuxt-toaster"
             />
             <!-- Terminal icon -->
             <div
               class="absolute top-0 left-0 w-14 h-14 flex items-center justify-center"
             >
-              <svg class="w-6 h-6 text-stone-400" viewBox="0 0 256 256">
+              <svg class="w-6 h-6 text-muted-400" viewBox="0 0 256 256">
                 <path
                   fill="currentColor"
                   d="m117.3 134l-72 64a8.1 8.1 0 0 1-5.3 2a8 8 0 0 1-5.3-14l65.3-58l-65.3-58a8 8 0 1 1 10.6-12l72 64a8 8 0 0 1 0 12Zm98.7 50h-96a8 8 0 0 0 0 16h96a8 8 0 0 0 0-16Z"
@@ -64,7 +82,7 @@
             <!-- Copy button -->
             <button
               type="button"
-              class="absolute top-2 right-2 h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500"
+              class="w-full lg:w-auto lg:absolute top-2 right-2 h-12 lg:h-10 py-2 px-5 rounded-lg text-sm text-white bg-indigo-500 hover:shadow-xl hover:shadow-indigo-500/20 dark:hover:shadow-indigo-800/10 transition-all duration-300"
             >
               Copy
             </button>
diff --git a/playground/components/Navigation.vue b/playground/components/Navigation.vue
@@ -14,23 +14,66 @@ const isChecked = ref(false)
 <template>
   <div
     class="fixed top-0 left-0 w-full z-50 transition-all duration-300"
-    :class="[isScrolled && 'bg-white dark:bg-slate-800']"
+    :class="[
+      isScrolled && 'bg-white dark:bg-muted-1000',
+      mobileOpen ? 'bg-white dark:bg-muted-1000' : '',
+    ]"
   >
     <div class="mx-auto w-full max-w-7xl p-4">
-      <div class="flex items-center justify-between gap-x-2">
-        <div class="flex items-center gap-x-2">
+      <div class="w-full flex items-center justify-between gap-x-2">
+        <div class="w-full lg:w-auto flex items-center gap-x-2">
           <img class="w-9 h-9" src="/assets/img/logo.svg" alt="Logo" />
-          <img class="h-5" src="/assets/img/logo-text.svg" alt="Logo text" />
+          <img
+            class="h-5 dark:invert"
+            src="/assets/img/logo-text.svg"
+            alt="Logo text"
+          />
+
+          <!-- Hamburger -->
+          <button
+            class="flex relative justify-center items-center ml-auto w-10 h-10 focus:outline-none lg:hidden"
+            @click="mobileOpen = !mobileOpen"
+          >
+            <div
+              class="block top-1/2 left-6 w-4 -translate-x-1/2 -translate-y-1/2"
+            >
+              <span
+                class="block absolute w-7 h-0.5 text-indigo-500 bg-current transition duration-500 ease-in-out"
+                :class="mobileOpen ? 'rotate-45' : '-translate-y-2'"
+              />
+              <span
+                class="block absolute w-5 h-0.5 text-indigo-500 bg-current transition duration-500 ease-in-out"
+                :class="mobileOpen ? 'opacity-0' : ''"
+              />
+              <span
+                class="block absolute w-7 h-0.5 text-indigo-500 bg-current transition duration-500 ease-in-out"
+                :class="mobileOpen ? '-rotate-45' : 'translate-y-2'"
+              />
+            </div>
+          </button>
         </div>
-        <div class="flex items-center justify-end divide-x divide-stone-300">
-          <div class="flex items-center justify-end gap-x-5 pr-4">
-            <NuxtLink to="/">Examples</NuxtLink>
-            <NuxtLink to="/api">API docs</NuxtLink>
+        <div
+          class="lg:flex flex-col lg:flex-row items-center justify-end p-6 lg:p-0 space-y-3 lg:space-y-0 lg:divide-x divide-muted-300 dark:divide-muted-700 bg-white dark:bg-muted-900 lg:bg-transparent dark:lg:bg-transparent"
+          :class="mobileOpen ? 'fixed top-[72px] left-0 w-full flex' : 'hidden'"
+        >
+          <div
+            class="flex flex-col lg:flex-row items-center justify-end gap-x-5 lg:pr-4 space-y-3 lg:space-y-0"
+          >
+            <NuxtLink
+              to="/"
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              >Examples</NuxtLink
+            >
+            <NuxtLink
+              to="/api"
+              class="text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
+              >API docs</NuxtLink
+            >
           </div>
-          <div class="flex items-center justify-end gap-x-1 pl-4">
+          <div class="flex items-center justify-end gap-x-1 lg:pl-4">
             <NuxtLink
               to="/"
-              class="w-10 h-10 flex items-center justify-center rounded-full"
+              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
             >
               <svg class="w-5 h-5" viewBox="0 0 1536 1504">
                 <path
@@ -41,7 +84,7 @@ const isChecked = ref(false)
             </NuxtLink>
             <NuxtLink
               to="/"
-              class="w-10 h-10 flex items-center justify-center rounded-full"
+              class="w-10 h-10 flex items-center justify-center rounded-full text-muted-700 hover:text-muted-500 dark:text-muted-400 dark:hover:text-muted-200 transition-colors duration-300"
             >
               <svg class="w-5 h-5" viewBox="0 0 1600 1280">
                 <path
@@ -51,17 +94,15 @@ const isChecked = ref(false)
               </svg>
             </NuxtLink>
             <!-- Theme -->
-            <label
-              class="block w-9 h-9 overflow-hidden relative mx-auto mb-4 lg:m-0"
-            >
+            <label class="block w-9 h-9 overflow-hidden relative mx-auto">
               <input
                 v-model="isChecked"
                 type="checkbox"
                 class="absolute top-0 left-0 z-[2] w-full h-full opacity-0 cursor-pointer"
                 @change="() => toggleDark()"
               />
               <span
-                class="block relative w-9 h-9 bg-white dark:bg-slate-800 rounded-full border border-slate-300 dark:border-slate-700"
+                class="block relative w-9 h-9 bg-white dark:bg-muted-800 rounded-full border border-muted-300 dark:border-muted-700"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -72,7 +113,7 @@ const isChecked = ref(false)
                   :class="[
                     !isChecked
                       ? 'opacity-100 -translate-x-[45%] -translate-y-1/2'
-                      : 'opacity-0  -translate-x-[45%] -translate-y-[150%]'
+                      : 'opacity-0  -translate-x-[45%] -translate-y-[150%]',
                   ]"
                   width="32"
                   height="32"
@@ -106,7 +147,7 @@ const isChecked = ref(false)
                   :class="[
                     !isChecked
                       ? 'opacity-0 -translate-x-[45%] -translate-y-[150%]'
-                      : 'opacity-100 -translate-x-[45%] -translate-y-1/2'
+                      : 'opacity-100 -translate-x-[45%] -translate-y-1/2',
                   ]"
                   width="32"
                   height="32"
diff --git a/playground/components/toast/ActionButtons.vue b/playground/components/toast/ActionButtons.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="w-full flex items-center gap-2 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center gap-2 p-3 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-stone-500 bg-stone-100 hover:text-stone-600 hover:bg-stone-50 transition-colors duration-300"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-muted-500 bg-muted-100 dark:bg-muted-900 hover:text-muted-600 dark:text-muted-400 hover:bg-muted-50 dark:hover:bg-muted-1000 dark:hover:text-muted-100 transition-colors duration-300"
     >
       Dismiss
     </button>
     <button
       type="button"
-      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 bg-sky-100 hover:text-sky-600 hover:bg-sky-50 transition-colors duration-300"
+      class="h-10 w-28 py-2 px-4 inline-flex items-center justify-center rounded-xl text-sm text-sky-500 dark:text-muted-100 bg-sky-100 dark:bg-sky-500 hover:text-sky-600 dark:hover:text-white hover:bg-sky-50 dark:hover:bg-sky-600 transition-colors duration-300"
     >
       Accept
     </button>
diff --git a/playground/components/toast/IconSoloDanger.vue b/playground/components/toast/IconSoloDanger.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full flex items-center gap-1 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center gap-1 p-3 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
       class="h-11 w-11 flex items-center justify-center rounded-full text-rose-500"
@@ -18,12 +18,15 @@
       </svg>
     </div>
     <div class="mr-6">
-      <span class="block font-semibold text-sm text-stone-800">Fire alert</span>
-      <span class="block text-xs text-stone-400">Get out of here fast!</span>
+      <span
+        class="block font-semibold text-sm text-muted-800 dark:text-muted-100"
+        >Fire alert</span
+      >
+      <span class="block text-xs text-muted-400">Get out of here fast!</span>
     </div>
     <button
       type="button"
-      class="h-11 w-11 flex items-center justify-center ml-auto"
+      class="h-11 w-11 flex items-center justify-center ml-auto text-muted-700 dark:text-muted-400"
     >
       <svg class="w-4 h-4" viewBox="0 0 24 24">
         <path
diff --git a/playground/components/toast/IconSuccess.vue b/playground/components/toast/IconSuccess.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="w-full flex items-center gap-3 py-3 pl-3 pr-6 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center gap-3 py-3 pl-3 pr-6 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
-      class="h-11 w-11 flex items-center justify-center rounded-full text-emerald-500 bg-emerald-100"
+      class="h-11 w-11 flex items-center justify-center rounded-full text-emerald-500 bg-emerald-100 dark:text-white dark:bg-emerald-500"
     >
       <svg class="w-5 h-5" viewBox="0 0 24 24">
         <path
@@ -12,6 +12,8 @@
         />
       </svg>
     </div>
-    <span class="text-sm text-stone-600">Your changes were saved!</span>
+    <span class="text-sm text-muted-600 dark:text-muted-400"
+      >Your changes were saved!</span
+    >
   </div>
 </template>
diff --git a/playground/components/toast/LabelInfo.vue b/playground/components/toast/LabelInfo.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="w-full flex items-center rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
-      class="h-16 w-16 flex items-center justify-center text-sky-500 bg-sky-100"
+      class="h-16 w-16 flex items-center justify-center text-sky-500 bg-sky-100 dark:text-white dark:bg-sky-500"
     >
       <svg class="w-5 h-5" viewBox="0 0 512 512">
         <path
@@ -13,7 +13,9 @@
       </svg>
     </div>
     <div class="pr-6 pl-4">
-      <span class="text-sm text-stone-600">Your changes were saved!</span>
+      <span class="text-sm text-muted-600 dark:text-muted-400"
+        >Your changes were saved!</span
+      >
     </div>
   </div>
 </template>
diff --git a/playground/components/toast/LabelSuccess.vue b/playground/components/toast/LabelSuccess.vue
@@ -3,7 +3,7 @@
     class="w-full flex items-center rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
   >
     <div
-      class="h-16 w-16 flex items-center justify-center text-emerald-500 bg-emerald-100"
+      class="h-16 w-16 flex items-center justify-center text-emerald-500 bg-emerald-100 dark:bg-emerald-500"
     >
       <svg class="w-6 h-6" viewBox="0 0 256 172">
         <path
@@ -17,7 +17,9 @@
       </svg>
     </div>
     <div class="pr-6 pl-4">
-      <span class="text-sm text-stone-600">Nuxt has been installed!</span>
+      <span class="text-sm text-stone-600 dark:text-muted-400"
+        >Nuxt has been installed!</span
+      >
     </div>
   </div>
 </template>
diff --git a/playground/components/toast/UserReplyClose.vue b/playground/components/toast/UserReplyClose.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full flex items-center gap-3 p-3 rounded-xl bg-white dark:bg-stone-800 shadow-xl shadow-stone-300/10 dark:shadow-stone-800/10 overflow-hidden"
+    class="w-full flex items-center gap-3 p-3 rounded-xl bg-white dark:bg-muted-800 shadow-xl shadow-muted-300/10 dark:shadow-muted-800/10 overflow-hidden"
   >
     <div
       class="inline-flex justify-center items-center relative w-10 h-10 rounded-full"
@@ -12,12 +12,15 @@
       />
     </div>
     <div class="mr-6">
-      <span class="block font-semibold text-sm text-stone-800">Clark E.</span>
-      <span class="block text-xs text-stone-400">Replied to your post</span>
+      <span
+        class="block font-semibold text-sm text-muted-800 dark:text-muted-100"
+        >Clark E.</span
+      >
+      <span class="block text-xs text-muted-400">Replied to your post</span>
     </div>
     <button
       type="button"
-      class="h-11 w-11 flex items-center justify-center ml-auto"
+      class="h-11 w-11 flex items-center justify-center ml-auto text-muted-400"
     >
       <svg class="w-4 h-4" viewBox="0 0 24 24">
         <path
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
diff --git a/playground/tailwind.config.ts b/playground/tailwind.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`