export_tailwind

Instructions

Implementation Reference

• src/tools/export-tailwind.ts:65-186 (handler)

  Core handler function that executes the tool logic: validates input parameters, processes color inputs, generates Tailwind CSS configurations, plugins, and utility classes in various formats.

  async function exportTailwind(
    params: ExportTailwindParams
  ): Promise<ToolResponse | ErrorResponse> {
    const startTime = Date.now();
  
    try {
      // Validate parameters
      const { error, value: validatedParams } =
        exportTailwindSchema.validate(params);
      if (error) {
        return createErrorResponse(
          'export_tailwind',
          'INVALID_PARAMETERS',
          `Invalid parameters: ${error.details.map(d => d.message).join(', ')}`,
          Date.now() - startTime
        );
      }
  
      // Parse colors
      const colors: UnifiedColor[] = [];
      for (const colorStr of validatedParams.colors) {
        try {
          const color = new UnifiedColor(colorStr);
          colors.push(color);
        } catch {
          return createErrorResponse(
            'export_tailwind',
            'INVALID_COLOR',
            `Invalid color format: ${colorStr}`,
            Date.now() - startTime,
            {
              details: { provided: colorStr },
              suggestions: [
                'Use hex format like #FF0000',
                'Use RGB format like rgb(255, 0, 0)',
                'Use HSL format like hsl(0, 100%, 50%)',
              ],
            }
          );
        }
      }
  
      // Generate Tailwind configuration
      const tailwindConfig = generateTailwindConfig(colors, validatedParams);
      const tailwindPlugin = generateTailwindPlugin(colors, validatedParams);
      const tailwindCSS = generateTailwindCSS(colors, validatedParams);
  
      // Determine output based on format
      let output = '';
      switch (validatedParams.format) {
        case 'config':
          output = tailwindConfig;
          break;
        case 'plugin':
          output = tailwindPlugin;
          break;
        case 'css':
          output = tailwindCSS;
          break;
        case 'all':
          output = `// Tailwind Config\n${tailwindConfig}\n\n// Tailwind Plugin\n${tailwindPlugin}\n\n// Generated CSS\n${tailwindCSS}`;
          break;
      }
  
      // Generate additional export formats
      const exportFormats = {
        tailwind: output,
        config: tailwindConfig,
        plugin: tailwindPlugin,
        css: tailwindCSS,
        json: {
          colors: colors.map((color, index) => ({
            index: index + 1,
            hex: color.hex,
            rgb: color.rgb,
            hsl: color.hsl,
            semantic_name: validatedParams.semantic_names?.[index],
            tailwind_name: getTailwindColorName(index, validatedParams),
          })),
          format: validatedParams.format,
          prefix: validatedParams.prefix,
          metadata: {
            total_colors: colors.length,
            includes_shades: validatedParams.include_shades,
            extends_default: validatedParams.extend_default,
            utilities: validatedParams.generate_utilities,
          },
        },
      };
  
      const executionTime = Date.now() - startTime;
  
      return createSuccessResponse(
        'export_tailwind',
        {
          tailwind_output: output,
          format: validatedParams.format,
          color_count: colors.length,
          prefix: validatedParams.prefix,
          includes_shades: validatedParams.include_shades,
          extends_default: validatedParams.extend_default,
          utilities: validatedParams.generate_utilities,
        },
        executionTime,
        {
          recommendations: [
            'Use semantic color names for better maintainability',
            'Consider including shade variations for more design flexibility',
            'Test the configuration in your Tailwind CSS setup',
          ],
          exportFormats,
        }
      );
    } catch (error) {
      return createErrorResponse(
        'export_tailwind',
        'PROCESSING_ERROR',
        error instanceof Error ? error.message : 'Unknown error occurred',
        Date.now() - startTime
      );
    }
  }

• src/tools/export-tailwind.ts:10-53 (schema)

  Joi schema defining the input parameters for the export_tailwind tool, including colors array, format, prefix, shades, etc.

  const exportTailwindSchema = Joi.object({
    colors: Joi.array()
      .items(Joi.string())
      .min(1)
      .max(100)
      .required()
      .description('Array of colors to export'),
  
    format: Joi.string()
      .valid('config', 'plugin', 'css', 'all')
      .default('config')
      .description('Tailwind export format'),
  
    prefix: Joi.string()
      .pattern(/^[a-zA-Z][a-zA-Z0-9-]*$/)
      .default('custom')
      .description('Prefix for color names'),
  
    include_shades: Joi.boolean()
      .default(true)
      .description('Include shade variations (50, 100, 200, etc.)'),
  
    semantic_names: Joi.array()
      .items(Joi.string())
      .description('Optional semantic names for colors'),
  
    extend_default: Joi.boolean()
      .default(true)
      .description('Extend default Tailwind colors instead of replacing'),
  
    generate_utilities: Joi.array()
      .items(
        Joi.string().valid(
          'background',
          'text',
          'border',
          'ring',
          'shadow',
          'all'
        )
      )
      .default(['all'])
      .description('Which utility classes to generate'),
  });

• src/tools/export-tailwind.ts:401-408 (registration)

  ToolHandler object definition and export, which wraps the handler function and schema for registration.

  export const exportTailwindTool: ToolHandler = {
    name: 'export_tailwind',
    description:
      'Generate Tailwind CSS configuration, plugins, and utility classes for color palettes',
    parameters: exportTailwindSchema.describe(),
    handler: async (params: unknown) =>
      exportTailwind(params as ExportTailwindParams),
  };

• src/tools/index.ts:142-142 (registration)

  Global registration of the exportTailwindTool in the central ToolRegistry singleton.

  toolRegistry.registerTool(exportTailwindTool);

• src/tools/export-tailwind.ts:191-229 (helper)

  Helper function to generate the Tailwind CSS configuration file content.

  function generateTailwindConfig(
    colors: UnifiedColor[],
    params: ExportTailwindParams
  ): string {
    const { prefix, include_shades, semantic_names, extend_default } = params;
  
    let config = `/** @type {import('tailwindcss').Config} */\n`;
    config += `module.exports = {\n`;
    config += `  theme: {\n`;
    config += `    ${extend_default ? 'extend: {' : ''}\n`;
    config += `      colors: {\n`;
  
    colors.forEach((color, index) => {
      const name = semantic_names?.[index] || `${prefix}-${index + 1}`;
      const safeName = name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
  
      if (include_shades) {
        config += `        '${safeName}': {\n`;
  
        // Generate shade variations
        const shades = generateColorShades(color);
        Object.entries(shades).forEach(([shade, shadeColor]) => {
          config += `          '${shade}': '${shadeColor}',\n`;
        });
  
        config += `        },\n`;
      } else {
        config += `        '${safeName}': '${color.hex}',\n`;
      }
    });
  
    config += `      },\n`;
    config += `    ${extend_default ? '},' : ''}\n`;
    config += `  },\n`;
    config += `  plugins: [],\n`;
    config += `}`;
  
    return config;
  }