fix: installations

tremorlabs · Jan 20, 2024 · 26c836f · 26c836f
1 parent d0a3d73
commit 26c836f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 34 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/src/index.ts b/src/index.ts
@@ -86,20 +86,39 @@ async function main() {
       ]);
       tremorSpinner.succeed();
 
-      const dependenciesSpinner = ora(
-        `Installing Tailwind CSS dependency...`
+      const headlessUiSpinner = ora(`Installing @headlessui/react...`).start();
+      await execa(packageManager, [
+        packageManager === "npm" ? "install" : "add",
+        "@headlessui/react",
+      ]);
+      headlessUiSpinner.succeed();
+
+      const headlessUiTailwindCssSpinner = ora(
+        `Installing @headlessui/tailwindcss...`
+      ).start();
+      await execa(packageManager, [
+        packageManager === "npm" ? "install" : "add",
+        "@headlessui/tailwindcss",
+      ]);
+      headlessUiSpinner.succeed();
+
+      const tailwindFormsSpinner = ora(
+        `Installing @tailwindcss/forms as a dev dependency...`
       ).start();
       await execa(packageManager, [
         packageManager === "npm" ? "install" : "add",
-        "-D @tailwindcss/forms",
+        "@tailwindcss/forms",
+        packageManager === "npm" ? "--save-dev" : "--dev",
       ]);
-      dependenciesSpinner.succeed();
+      tailwindFormsSpinner.succeed();
 
       // Check the kind of project (TypeScript/JavaScript)
       const isTypeScriptProject = fs.existsSync("tsconfig.json");
 
       // Infer the name of the tailwind config file accordingly
-      const tailwindConfigFileName = isTypeScriptProject ? "tailwind.config.ts" : "tailwind.config.js";
+      const tailwindConfigFileName = isTypeScriptProject
+        ? "tailwind.config.ts"
+        : "tailwind.config.js";
       const tailwindDestination = `./${tailwindConfigFileName}`;
 
       // Check if the tailwind config file already exists
@@ -120,7 +139,9 @@ async function main() {
       // }
 
       // Write the tailwind config file
-      const tailwindSpinner = ora(`Configuring ${tailwindConfigFileName}...`).start();
+      const tailwindSpinner = ora(
+        `Configuring ${tailwindConfigFileName}...`
+      ).start();
       await fs.writeFile(
         tailwindDestination,
         getTailwindConfig(frameworkConfigType),

diff --git a/src/templates.ts b/src/templates.ts
@@ -39,34 +39,34 @@ export const CONTENT_REFINE = `[
   ]`;
 
 export const SAFELIST = `[
-    {
-      pattern:
-        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-      variants: ["hover", "ui-selected"],
-    },
-    {
-      pattern:
-        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-    {
-      pattern:
-        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-    {
-      pattern:
-        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
-    },
-]`;
+  {
+    pattern:
+      /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    variants: ["hover", "ui-selected"],
+  },
+  {
+    pattern:
+      /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    variants: ["hover", "ui-selected"],
+  },
+  {
+    pattern:
+      /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+    variants: ["hover", "ui-selected"],
+  },
+  {
+    pattern:
+      /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+  },
+  {
+    pattern:
+      /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+  },
+  {
+    pattern:
+      /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
+  },
+],`;
 
 export const THEME = `{
     transparent: "transparent",