convert_to_tailwind

Instructions

Implementation Reference

• src/index.ts:302-330 (registration)

  Registration of the 'convert_to_tailwind' tool in the TOOLS array, including input schema definition.

  {
    name: 'convert_to_tailwind',
    description: 'Convert CSS/SCSS to Tailwind classes',
    inputSchema: {
      type: 'object',
      properties: {
        code: {
          type: 'string',
          description: 'CSS, SCSS, or HTML with styles to convert'
        },
        format: {
          type: 'string',
          enum: ['css', 'scss', 'html'],
          description: 'Input format'
        },
        preserveCustom: {
          type: 'boolean',
          default: false,
          description: 'Preserve custom properties that cannot be converted'
        },
        optimize: {
          type: 'boolean',
          default: true,
          description: 'Optimize the converted classes'
        }
      },
      required: ['code', 'format']
    }
  },

• src/utils/tool-functions.ts:76-85 (handler)

  The handler function called by the tool dispatcher to execute the conversion logic. Currently implemented as a placeholder returning mock response.

  export async function convertToTailwind(args: ConversionOptions) {
    return {
      content: [
        {
          type: 'text',
          text: `Converted CSS to Tailwind\nSource: ${args.source || 'css'}\nTarget: ${args.target || 'tailwind'}`
        }
      ]
    };
  }

• src/types.ts:69-77 (schema)

  TypeScript interface defining the expected input parameters for the convertToTailwind function.

  export interface ConversionOptions {
    css: string;
    source?: 'css' | 'scss' | 'less' | 'stylus';
    target?: 'tailwind' | 'utility-first';
    framework?: 'tailwind' | 'unocss' | 'windicss';
    optimization?: 'none' | 'basic' | 'aggressive';
    preserveComments?: boolean;
    generateVariables?: boolean;
  }

• src/index.ts:445-446 (handler)

  Tool dispatcher switch case that routes calls to the specific 'convert_to_tailwind' handler.

  case 'convert_to_tailwind':
    return await convertToTailwind(args as unknown as ConversionOptions);

• src/tools/css-converter.ts:85-185 (helper)

  Comprehensive helper function implementing CSS/SCSS/HTML to Tailwind conversion using AI (Gemini) with fallback manual mapping. Matches tool input schema perfectly, likely intended for use in production.

  export async function convertToTailwind(args: ConvertRequest) {
    try {
      const {
        code,
        format,
        preserveCustom = false,
        optimize = true
      } = args;
  
      let convertedCode = '';
      let conversionNotes: string[] = [];
      let unconvertedStyles: string[] = [];
  
      if (isGeminiAvailable()) {
        // Use AI for advanced conversion
        const prompt = `Convert the following ${format.toUpperCase()} code to Tailwind CSS classes:
  
  ${code}
  
  Requirements:
  1. Convert all possible CSS properties to equivalent Tailwind classes
  2. ${preserveCustom ? 'Preserve custom properties that cannot be converted as CSS custom properties' : 'Note any styles that cannot be converted to Tailwind'}
  3. ${optimize ? 'Optimize the resulting classes for performance and readability' : ''}
  4. Maintain the visual appearance exactly
  5. Use modern Tailwind practices and utilities
  
  Return a JSON response with:
  {
    "convertedCode": "HTML/CSS with Tailwind classes",
    "conversionNotes": ["List of conversion notes and decisions made"],
    "unconvertedStyles": ["List of styles that couldn't be converted"],
    "suggestions": ["List of optimization suggestions"]
  }
  
  Focus on:
  - Accurate class mapping
  - Responsive design patterns
  - Accessibility considerations
  - Performance optimization
  - Maintainable code structure`;
  
        const aiResponse = await callGemini(prompt);
        
        try {
          const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
          if (jsonMatch) {
            const result = JSON.parse(jsonMatch[0]);
            convertedCode = result.convertedCode;
            conversionNotes = result.conversionNotes || [];
            unconvertedStyles = result.unconvertedStyles || [];
          } else {
            throw new Error('No valid JSON found in AI response');
          }
        } catch (parseError) {
          // Fallback to manual conversion
          const manualResult = performManualConversion(code, format);
          convertedCode = manualResult.code;
          conversionNotes = manualResult.notes;
          unconvertedStyles = manualResult.unconverted;
        }
      } else {
        // Manual conversion
        const manualResult = performManualConversion(code, format);
        convertedCode = manualResult.code;
        conversionNotes = manualResult.notes;
        unconvertedStyles = manualResult.unconverted;
      }
  
      return {
        content: [
          {
            type: 'text',
            text: `# CSS to Tailwind Conversion
  
  ## Converted Code
  \`\`\`${format === 'html' ? 'html' : 'css'}
  ${convertedCode}
  \`\`\`
  
  ## Conversion Summary
  ${conversionNotes.length > 0 ? conversionNotes.map(note => `- ${note}`).join('\n') : 'No specific conversion notes.'}
  
  ${unconvertedStyles.length > 0 ? `## Unconverted Styles
  The following styles could not be converted to Tailwind classes:
  ${unconvertedStyles.map(style => `- \`${style}\``).join('\n')}
  
  Consider using CSS custom properties or Tailwind plugins for these styles.` : ''}
  
  ## Usage Tips
  - Test the converted code to ensure visual consistency
  - Consider extracting repeated class patterns into components
  - Use Tailwind's JIT mode for optimal performance
  - Add responsive variants as needed (sm:, md:, lg:, xl:)`
          }
        ]
      };
    } catch (error) {
      console.error('CSS conversion error:', error);
      throw new Error(`Failed to convert CSS: ${error instanceof Error ? error.message : 'Unknown error'}`);
    }
  }