From 268a1e15033d5f34e2e003e6d296f2c7ef3200c2 Mon Sep 17 00:00:00 2001
From: Feenix <25067102+NayamAmarshe@users.noreply.github.com>
Date: Sat, 12 Nov 2022 03:02:24 +0530
Subject: [PATCH] Added daisyUI

---
 package.json                          |  2 +
 renderer/components/Header.tsx        |  4 +-
 renderer/components/LeftPaneSteps.tsx | 80 +++++++-------------------
 renderer/components/RightPaneInfo.tsx |  6 +-
 renderer/pages/_app.tsx               |  4 +-
 renderer/pages/index.tsx              | 23 ++------
 renderer/styles/globals.css           | 16 +++---
 tailwind.config.js                    |  7 +--
 yarn.lock                             | 82 ++++++++++++++++++++++++++-
 9 files changed, 126 insertions(+), 98 deletions(-)

diff --git a/package.json b/package.json
index d7d5a46..61e1cd8 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "scripts": {
     "clean": "rimraf dist renderer/.next renderer/out",
     "start": "tsc && electron .",
+    "dev": "tsc && electron .",
     "build": "next build renderer && next export renderer",
     "tsc": "tsc",
     "pack-app": "npm run build && electron-builder --dir",
@@ -142,6 +143,7 @@
   },
   "dependencies": {
     "app-root-dir": "^1.0.2",
+    "daisyui": "^2.39.1",
     "electron-is-dev": "^2.0.0",
     "electron-is-packaged": "^1.0.2",
     "electron-next": "^3.1.5",
diff --git a/renderer/components/Header.tsx b/renderer/components/Header.tsx
index 63db483..9a98b80 100644
--- a/renderer/components/Header.tsx
+++ b/renderer/components/Header.tsx
@@ -15,8 +15,8 @@ export default function Header() {
           data-tip="Star us on GitHub 😁"
         />
         <div className="flex flex-col justify-center">
-          <h1 className="text-3xl font-bold text-neutral-50">Upscayl</h1>
-          <p className="text-neutral-400">AI Image Upscaler</p>
+          <h1 className="text-3xl font-bold">Upscayl</h1>
+          <p className="">AI Image Upscaler</p>
         </div>
       </div>
     </a>
diff --git a/renderer/components/LeftPaneSteps.tsx b/renderer/components/LeftPaneSteps.tsx
index db365f5..f5d053b 100644
--- a/renderer/components/LeftPaneSteps.tsx
+++ b/renderer/components/LeftPaneSteps.tsx
@@ -35,54 +35,36 @@ function LeftPaneSteps(props) {
   return (
     <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5">
       {/* BATCH OPTION */}
-      <div className="flex flex-row items-end">
+      <div className="flex flex-row items-center gap-2">
+        <input
+          type="checkbox"
+          className="checkbox"
+          onClick={handleBatchMode}
+        ></input>
         <p
-          className="mr-1 inline-block cursor-help text-sm text-white/70"
+          className="mr-1 inline-block cursor-help text-sm"
           data-tip="This will let you upscale all files in a folder at once"
         >
-          Batch Upscale:
+          Batch Upscale
         </p>
-        <button
-          className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full outline-none focus-visible:shadow-lg focus-visible:shadow-purple-500 ${
-            props.batchMode ? "bg-gradient-purple" : "bg-neutral-500"
-          }`}
-          onClick={handleBatchMode}
-        >
-          <div
-            className={`${
-              props.batchMode ? "translate-x-4" : "translate-x-1"
-            } animate absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-neutral-100`}
-          ></div>
-        </button>
       </div>
 
       {/* ADVANCED OPTION */}
-      <div className="flex flex-row items-end">
+      <div className="flex flex-row items-center gap-2">
+        <input type="checkbox" className="checkbox" onClick={handleBatchMode} />
         <p
-          className="mr-1 inline-block cursor-help text-sm text-white/70"
+          className="mr-1 inline-block cursor-help text-sm"
           data-tip="This will let you upscale all files in a folder at once"
         >
-          Advanced Options:
+          Advanced Options
         </p>
-        <button
-          className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full outline-none focus-visible:shadow-lg focus-visible:shadow-purple-500 ${
-            props.batchMode ? "bg-gradient-purple" : "bg-neutral-500"
-          }`}
-          onClick={handleBatchMode}
-        >
-          <div
-            className={`${
-              props.batchMode ? "translate-x-4" : "translate-x-1"
-            } animate absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-neutral-100`}
-          ></div>
-        </button>
       </div>
 
       {/* STEP 1 */}
       <div data-tip={props.imagePath}>
         <p className="step-heading">Step 1</p>
         <button
-          className="animate bg-gradient-red rounded-lg p-3 font-medium text-white/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-red-500"
+          className="btn-primary btn"
           onClick={
             !props.batchMode
               ? props.selectImageHandler
@@ -96,7 +78,7 @@ function LeftPaneSteps(props) {
       {/* STEP 2 */}
       <div className="animate-step-in">
         <p className="step-heading">Step 2</p>
-        <p className="mb-2 text-sm text-white/60">Select Upscaling Type</p>
+        <p className="mb-2 text-sm">Select Upscaling Type</p>
 
         <Select
           options={modelOptions}
@@ -105,7 +87,7 @@ function LeftPaneSteps(props) {
             DropdownIndicator: () => null,
           }}
           onChange={props.handleModelChange}
-          className="react-select-container"
+          className="react-select-container select"
           classNamePrefix="react-select"
           defaultValue={modelOptions[0]}
           theme={(theme) => ({
@@ -143,22 +125,11 @@ function LeftPaneSteps(props) {
           }}
         />
 
-        {/* <select
-          name="select-model"
-          onDrop={(e) => props.handleDrop(e)}
-          className="animate bg-gradient-white block cursor-pointer rounded-lg p-3 font-medium text-black/90 outline-none hover:bg-slate-200 focus-visible:ring-2 focus-visible:ring-slate-400"
-          onChange={props.handleModelChange}
-        >
-          <option value="realesrgan-x4plus">General Photo</option>
-          <option value="realesrgan-x4plus-anime">Digital Art</option>
-          <option value="models-DF2K">Sharpen Image</option>
-        </select> */}
-
         {props.model !== "models-DF2K" && !props.batchMode && (
           <div className="mt-2 flex items-center gap-1">
             <input
               type="checkbox"
-              className="checked:bg-gradient-white h-4 w-4 cursor-pointer appearance-none rounded-full bg-white/30 transition duration-200 focus:outline-none focus-visible:border focus-visible:shadow-lg focus-visible:shadow-white/40"
+              className="checkbox"
               checked={props.doubleUpscayl}
               onChange={(e) => {
                 if (e.target.checked) {
@@ -169,11 +140,7 @@ function LeftPaneSteps(props) {
               }}
             />
             <p
-              className={`inline-block cursor-pointer select-none rounded-full text-sm font-medium ${
-                props.doubleUpscayl
-                  ? "bg-gradient-white px-2 text-black/90"
-                  : "text-white/50"
-              }`}
+              className="cursor-pointer text-sm"
               onClick={(e) => {
                 props.setDoubleUpscayl(!props.doubleUpscayl);
               }}
@@ -181,7 +148,7 @@ function LeftPaneSteps(props) {
               Double Upscayl
             </p>
             <span
-              className="cursor-help rounded-full bg-white/20 px-3 text-center font-bold text-white/40"
+              className="badge-info badge cursor-help"
               data-tip="Enable this option to get an 8x upscayl. Note that this may not always work properly with all images, for example, images with really large resolutions."
             >
               i
@@ -193,11 +160,8 @@ function LeftPaneSteps(props) {
       {/* STEP 3 */}
       <div className="animate-step-in" data-tip={props.outputPath}>
         <p className="step-heading">Step 3</p>
-        <p className="mb-2 text-sm text-white/60">Defaults to Image's path</p>
-        <button
-          className="animate bg-gradient mt-1 rounded-lg p-3 font-medium text-black/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-green-500"
-          onClick={props.outputHandler}
-        >
+        <p className="mb-2 text-sm">Defaults to Image's path</p>
+        <button className="btn-primary btn" onClick={props.outputHandler}>
           Set Output Folder
         </button>
       </div>
@@ -206,7 +170,7 @@ function LeftPaneSteps(props) {
       <div className="animate-step-in">
         <p className="step-heading">Step 4</p>
         <button
-          className="animate bg-gradient-upscayl rounded-lg p-3 font-medium text-white/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-violet-500"
+          className="btn-accent btn"
           onClick={props.upscaylHandler}
           disabled={props.progress.length > 0}
         >
@@ -215,7 +179,7 @@ function LeftPaneSteps(props) {
       </div>
 
       <ReactTooltip
-        className="max-w-md break-words bg-neutral-900 text-neutral-50"
+        className="bg-neutral-900 text-neutral-50 max-w-md break-words"
         place="top"
       />
     </div>
diff --git a/renderer/components/RightPaneInfo.tsx b/renderer/components/RightPaneInfo.tsx
index f9f430a..01a0a7e 100644
--- a/renderer/components/RightPaneInfo.tsx
+++ b/renderer/components/RightPaneInfo.tsx
@@ -3,16 +3,16 @@ import React from "react";
 function RightPaneInfo({ version, batchMode }) {
   return (
     <>
-      <p className="p-5 pb-0 text-lg font-medium text-neutral-400">
+      <p className="p-5 pb-1 text-lg font-semibold">
         Select {batchMode ? "a Folder" : "an Image"} to Upscale
       </p>
       {batchMode && (
-        <p className="w-full py-5 text-center text-neutral-500 md:w-96">
+        <p className="w-full pb-5 text-center md:w-96">
           Make sure that the folder doesn't contain anything except PNG, JPG,
           JPEG & WEBP images.
         </p>
       )}
-      <p className="text-neutral-600">Upscayl v{version}</p>
+      <p className="text-sm">Upscayl v{version}</p>
     </>
   );
 }
diff --git a/renderer/pages/_app.tsx b/renderer/pages/_app.tsx
index f625ffb..71b6523 100644
--- a/renderer/pages/_app.tsx
+++ b/renderer/pages/_app.tsx
@@ -4,12 +4,12 @@ import { AppProps } from "next/app";
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
-    <>
+    <div data-theme="dark">
       <Head>
         <title>Upscayl</title>
       </Head>
       <Component {...pageProps} />
-    </>
+    </div>
   );
 };
 
diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index 7f80467..308accb 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -263,8 +263,8 @@ const Home = () => {
   };
 
   return (
-    <div className="flex h-screen w-screen flex-row overflow-hidden bg-[#1d1c23]">
-      <div className="flex h-screen w-96 flex-col bg-[#26222c]">
+    <div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
+      <div className="flex h-screen w-96 flex-col bg-base-100">
         {((!batchMode && imagePath.length > 0) ||
           (batchMode && batchFolderPath.length > 0)) && (
           <ResetButton resetImagePaths={resetImagePaths} />
@@ -334,14 +334,14 @@ const Home = () => {
         {batchMode &&
           upscaledBatchFolderPath.length === 0 &&
           batchFolderPath.length > 0 && (
-            <p className="select-none font-bold text-neutral-50">
+            <p className="text-neutral-50 select-none font-bold">
               Selected folder: {batchFolderPath}
             </p>
           )}
 
         {batchMode && upscaledBatchFolderPath.length > 0 && (
           <>
-            <p className="select-none py-4 font-bold text-neutral-50">
+            <p className="text-neutral-50 select-none py-4 font-bold">
               All done!
             </p>
             <button
@@ -388,21 +388,6 @@ const Home = () => {
             className="h-screen"
           />
         )}
-
-        {/* {imagePath.length === 0 && batchFolderPath.length === 0 ? (
-          <RightPaneInfo version={version} />
-        ) : upscaledImagePath.length === 0 &&
-          upscaledBatchFolderPath.length === 0 ? (
-          !batchMode ? (
-            
-          ) : (
-            
-          )
-        ) : !batchMode ? (
-          
-        ) : (
-
-        )} */}
       </div>
     </div>
   );
diff --git a/renderer/styles/globals.css b/renderer/styles/globals.css
index d35f783..1b16d77 100644
--- a/renderer/styles/globals.css
+++ b/renderer/styles/globals.css
@@ -11,15 +11,15 @@
   }
 
   ::-webkit-scrollbar-track {
-    @apply rounded-full bg-neutral-700;
+    @apply rounded-full bg-base-300;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply rounded-full bg-neutral-500;
+    @apply rounded-full bg-base-200;
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    @apply rounded-full bg-neutral-400;
+    @apply rounded-full bg-base-content;
   }
 }
 
@@ -27,14 +27,14 @@
   .animate {
     @apply transition-all duration-300 ease-in-out;
   }
-  .bg-gradient-purple {
+  /* .bg-gradient-purple {
     @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
   }
   .bg-gradient-red {
     @apply bg-gradient-to-br from-rose-600 to-red-400 hover:from-red-400 hover:to-rose-600;
   }
   .bg-gradient-white {
-    @apply bg-gradient-to-br from-slate-400 to-neutral-100 hover:from-neutral-100 hover:to-slate-400;
+    @apply to-neutral-100 hover:from-neutral-100 bg-gradient-to-br from-slate-400 hover:to-slate-400;
   }
   .bg-gradient-upscayl {
     @apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
@@ -44,15 +44,15 @@
   }
   .bg-gradient-blue {
     @apply bg-gradient-to-br from-blue-500 to-sky-400 hover:from-sky-400 hover:to-blue-500;
-  }
+  } */
   .step-heading {
-    @apply mb-2 font-medium text-white/80;
+    @apply mb-2 font-semibold;
   }
   .react-select-container {
     @apply w-40 text-black;
   }
   .react-select-container .react-select__control {
-    @apply bg-gradient-white cursor-pointer rounded-lg p-1;
+    @apply cursor-pointer rounded-lg p-1;
   }
   .react-select-container .react-select__menu {
     @apply rounded-lg bg-slate-300 p-1;
diff --git a/tailwind.config.js b/tailwind.config.js
index 5c9fe2a..4a856a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,9 +3,6 @@ module.exports = {
     "./renderer/pages/**/*.{js,ts,jsx,tsx}",
     "./renderer/components/**/*.{js,ts,jsx,tsx}",
   ],
-  theme: {
-    extend: {},
-  },
-  darkMode: "class",
-  plugins: [require("tailwind-scrollbar")],
+  theme: {},
+  plugins: [require("daisyui"), require("tailwind-scrollbar")],
 };
diff --git a/yarn.lock b/yarn.lock
index d11d846..82f533a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -961,11 +961,27 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^4.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 colors@1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz"
@@ -1047,6 +1063,14 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+css-selector-tokenizer@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
+  integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
+  dependencies:
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
@@ -1057,6 +1081,16 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+daisyui@^2.39.1:
+  version "2.39.1"
+  resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.39.1.tgz#0d9fe91dba114ab98651c8712de8b5c6a153abe2"
+  integrity sha512-J7goHjiQ6zk7irpKJ0HyElAuWF+x8iGoebQ1IfHM6BuvKoGSOcfZC/bedTultsX2Co5XARsE+qvE7BI1amUtsQ==
+  dependencies:
+    color "^4.2"
+    css-selector-tokenizer "^0.8.0"
+    postcss-js "^4.0.0"
+    tailwindcss "^3"
+
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
@@ -1376,6 +1410,11 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
+fastparse@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
+  integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
+
 fastq@^1.6.0:
   version "1.13.0"
   resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
@@ -1713,6 +1752,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
@@ -2552,6 +2596,13 @@ shebang-regex@^3.0.0:
   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 simple-update-notifier@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-1.0.7.tgz#7edf75c5bdd04f88828d632f762b2bc32996a9cc"
@@ -2665,6 +2716,35 @@ tailwind-scrollbar@^2.0.1:
   resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz#f08721173d513f1406a44601640b79726e3f9728"
   integrity sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==
 
+tailwindcss@^3:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"
+  integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==
+  dependencies:
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    detective "^5.2.1"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.12"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    lilconfig "^2.0.6"
+    micromatch "^4.0.5"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.18"
+    postcss-import "^14.1.0"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.4"
+    postcss-nested "6.0.0"
+    postcss-selector-parser "^6.0.10"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.1"
+
 tailwindcss@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.2.tgz#705f78cec8f4de2feb52abdb7a8a056e67f2d736"