@webmate-studio/builder 0.2.87 → 0.2.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webmate-studio/builder",
-  "version": "0.2.87",
+  "version": "0.2.88",
   "type": "module",
   "description": "Webmate Studio Component Builder",
   "keywords": [

package/src/tailwind-generator.js

@@ -401,7 +401,7 @@ ${themeCSS}
 		let result = await compiler.build(classArray);
 
 		console.log(`[Tailwind Generator] includeBaseLayers = ${includeBaseLayers}`);
-		console.log(`[Tailwind Generator] Generated CSS length BEFORE stripping: ${result.length}`);
+		console.log(`[Tailwind Generator] Generated CSS length BEFORE processing: ${result.length}`);
 		console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
 		console.log(`[Tailwind Generator] CSS contains @layer theme: ${result.includes('@layer theme')}`);
 
@@ -411,12 +411,14 @@ ${themeCSS}
 			result = stripNonUtilityLayers(result);
 			console.log(`[Tailwind Generator] Generated CSS length AFTER stripping: ${result.length}`);
 			console.log(`[Tailwind Generator] CSS contains @layer base: ${result.includes('@layer base')}`);
-
-			// Wrap in @layer components (btn, etc. are components, not utilities)
-			// Utilities from design tokens (@layer utilities) can then override them
-			result = `@layer components {\n${result}\n}`;
 		}
 
+		// ALWAYS wrap component CSS in @layer components
+		// This ensures utilities from design tokens (@layer utilities) can override them
+		// Even if base layers are included, component-specific CSS should be in @layer components
+		console.log('[Tailwind Generator] Wrapping in @layer components...');
+		result = `@layer components {\n${result}\n}`;
+
 		return result;
 
 	} catch (error) {