MCP Tailwind Gemini Server

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'}`); } }