Function ensureTailwindSetup

packages/cli/src/utils/tailwindSetup.ts:231–300

(componentDir: string)

// Main function to handle Tailwind setup
export async function ensureTailwindSetup(componentDir: string): Promise<void> {
	console.log(pc.blue('\n🎨 Checking Tailwind CSS setup...'));

	const tailwindInfo = await detectTailwindCSS();

	if (!tailwindInfo.hasTailwind) {
		console.log(
			pc.yellow('\n⚠️  Tailwind CSS is required for Cedar components.')
		);

		const shouldInstall = await confirm({
			message: 'Would you like to install Tailwind CSS now?',
			initialValue: true,
		});

		if (p.isCancel(shouldInstall)) {
			p.cancel('Operation cancelled.');
			process.exit(0);
		}

		if (!shouldInstall) {
			console.log(
				pc.red('\n❌ Cedar components require Tailwind CSS to work properly.')
			);
			console.log(pc.gray('   Please install it manually:'));
			const { manager } = detectPackageManager();
			const devFlag = manager === 'npm' ? '--save-dev' : '-D';
			console.log(
				pc.cyan(
					`   ${manager} ${
						manager === 'npm' ? 'install' : 'add'
					} ${devFlag} @tailwindcss/postcss tailwindcss`
				)
			);
			console.log(
				pc.gray(
					'\n   Then add Cedar components to your tailwind.config.js content array:'
				)
			);
			console.log(pc.cyan(`   './${componentDir}/**/*.{js,ts,jsx,tsx}'`));
			process.exit(1);
		}

		// Install Tailwind
		const installed = await installTailwindCSS();
		if (!installed) {
			process.exit(1);
		}

		// Initialize PostCSS config
		const initialized = await initializeTailwindConfig();
		if (!initialized) {
			console.log(pc.yellow('⚠️  Please create postcss.config.mjs manually.'));
		}

		// Add Tailwind import to CSS
		await addTailwindImportToCSS();