convert_css_to_tailwind
Convert traditional CSS code into TailwindCSS utility classes for streamlined development. Choose output formats like inline classes, component directives, or space-separated utilities.
Instructions
Convert traditional CSS to TailwindCSS utility classes
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| css | Yes | CSS code to convert to TailwindCSS utilities | |
| mode | No | Output format: 'classes' for space-separated utilities, 'inline' for class attribute, 'component' for @apply directive (default: classes) |
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"); } }