CLI now defaults to tailwind 3

.changeset/stale-dingos-crash.md

@@ -0,0 +1,5 @@
+---
+'qwik-ui': patch
+---
+
+FIX: cli now works but defaults to tailwind 3 installation. Support for Tailwind 4 is coming

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node_version: [18, 20, 21, 22]
+        node_version: [18, 20, 22]
 
     steps:
       - uses: actions/checkout@v3

packages/cli-e2e/src/cli.smoke.spec.ts

@@ -0,0 +1,75 @@
+import { execSync } from 'child_process';
+import { existsSync, mkdirSync, rmSync } from 'fs';
+import { join } from 'path';
+
+describe('Qwik UI CLI Smoke test', () => {
+  let projectDirectory: string;
+  let tempDirectory: string;
+
+  beforeAll(() => {
+    const { projectDirectory: projDir, tempDir } = createTestQwikProject();
+
+    projectDirectory = projDir;
+    tempDirectory = tempDir;
+  });
+
+  afterAll(() => {
+    // Cleanup the test project
+    rmSync(tempDirectory, {
+      recursive: true,
+      force: true,
+    });
+  });
+
+  it('should be installed and add the button file', () => {
+    execSync(
+      'npx -y qwik-ui@e2e init --e2e --projectRoot ./ --uiComponentsPath "src/components/ui" --rootCssPath "src/global.css" --installTailwind --style "simple" --components=button',
+      {
+        cwd: projectDirectory,
+        env: process.env,
+        stdio: 'inherit',
+      },
+    );
+    execSync('npx -y qwik-ui@e2e add button', {
+      cwd: projectDirectory,
+      env: process.env,
+      stdio: 'inherit',
+    });
+    const buttonIsInTheRightPlace = existsSync(
+      join(projectDirectory, 'src/components/ui/button/button.tsx'),
+    );
+    expect(buttonIsInTheRightPlace).toBeTruthy();
+  });
+});
+
+/**
+ * Creates a test project
+ * @returns The directory where the test project was created
+ */
+function createTestQwikProject() {
+  const projectName = 'test-qwik-project';
+  const tempDir = join('/tmp', 'tmp-qwik-ui-cli-e2e');
+
+  // Ensure projectDirectory is empty
+  rmSync(tempDir, {
+    recursive: true,
+    force: true,
+  });
+  mkdirSync(tempDir, {
+    recursive: true,
+  });
+
+  execSync(`pnpm create qwik@latest empty ${projectName}`, {
+    cwd: tempDir,
+    stdio: 'inherit',
+    env: process.env,
+  });
+  console.log(`Created test project in "${tempDir}"`);
+
+  const projectDirectory = join(tempDir, projectName);
+
+  return {
+    projectDirectory,
+    tempDir,
+  };
+}

packages/cli/bin/index.ts

@@ -185,7 +185,7 @@ async function handleInit() {
 
   if (installTailwind) {
     execSync(
-      `${getPackageManagerCommand().exec} qwik add tailwind --skipConfirmation=true --projectDir=${config.projectRoot}`,
+      `${getPackageManagerCommand().exec} qwik add tailwind-v3 --skipConfirmation=true --projectDir=${config.projectRoot}`,
       {
         stdio: 'inherit',
         cwd: config.projectRoot,