TailwindCSS MCP Server

Instructions

Implementation Reference

• src/services/utility-mapper.ts:39-87 (handler)

  The implementation of convertCSSToTailwind, which processes CSS and maps it to Tailwind utility classes.

  async convertCSSToTailwind(css: string, mode: "inline" | "classes" | "component" = "classes"): Promise<ConversionResult> {
    try {
      const result = await postcss().process(css, { from: undefined });
      const root = result.root;
  
      const tailwindClasses: string[] = [];
      const unsupportedStyles: string[] = [];
      const suggestions: string[] = [];
  
      root.walkDecls((decl) => {
        const cssProperty = decl.prop;
        const cssValue = decl.value;
        
        const utilities = this.cssPropertyMap.get(cssProperty);
        
        if (utilities && utilities.length > 0) {
          const matchingUtility = this.findBestUtilityMatch(cssProperty, cssValue);
          if (matchingUtility) {
            tailwindClasses.push(matchingUtility);
          } else {
            // Try to create arbitrary value
            const arbitraryUtility = this.createArbitraryUtility(cssProperty, cssValue);
            if (arbitraryUtility) {
              tailwindClasses.push(arbitraryUtility);
              suggestions.push(`Consider using ${arbitraryUtility} for ${cssProperty}: ${cssValue}`);
            } else {
              unsupportedStyles.push(`${cssProperty}: ${cssValue}`);
            }
          }
        } else {
          unsupportedStyles.push(`${cssProperty}: ${cssValue}`);
        }
      });
  
      return {
        tailwindClasses: tailwindClasses.join(' '),
        unsupportedStyles: unsupportedStyles.length > 0 ? unsupportedStyles : undefined,
        suggestions: suggestions.length > 0 ? suggestions : undefined,
      };
  
    } catch (error) {
      throw new ServiceError(
        'Failed to convert CSS to TailwindCSS',
        'UtilityMapperService',
        'convertCSSToTailwind',
        error
      );
    }
  }

• src/index.ts:199-215 (registration)

  Tool registration for convert_css_to_tailwind in the MCP server.

  name: "convert_css_to_tailwind",
  description: "Convert traditional CSS to TailwindCSS utility classes",
  inputSchema: {
    type: "object",
    properties: {
      css: {
        type: "string",
        description: "CSS code to convert to TailwindCSS utilities",
      },
      mode: {
        type: "string",
        enum: ["inline", "classes", "component"],
        description: "Output format: 'classes' for space-separated utilities, 'inline' for class attribute, 'component' for @apply directive (default: classes)",
      },
    },
    required: ["css"],
  },

• src/index.ts:478-486 (handler)

  The handler function that links the MCP tool request to the utility-mapper service.

  private async handleConvertCSSToTailwind(args: any): Promise<any> {
    try {
      const params = this.validateConvertCSSParams(args);
      const result = await this.conversionService.convertCSS(params);
      return this.createSuccessResponse(result);
    } catch (error) {
      this.handleServiceError(error, "Failed to convert CSS to TailwindCSS");
    }
  }