generate_tailwind_classes
Generate Tailwind CSS utility classes for spacing, colors, typography, layout, and effects to style React components efficiently.
Instructions
Generate Tailwind utility classes for specific use cases
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | ||
| values | No |
Implementation Reference
- src/index.ts:414-425 (handler)MCP server handler for the generate_tailwind_classes tool. Parses input using schema and delegates to utilityTools.generateTailwindClasses
case "generate_tailwind_classes": { const { type, values } = GenerateTailwindClassesSchema.parse(args); const classes = utilityTools.generateTailwindClasses(type, values); return { content: [ { type: "text", text: classes, }, ], }; } - src/tools/utilityTools.ts:11-26 (helper)Core implementation of generateTailwindClasses that switches on type and calls specific generators for Tailwind utility classes
generateTailwindClasses(type: string, values?: Record<string, any>): string { switch (type) { case "spacing": return this.generateSpacingClasses(values); case "colors": return this.generateColorClasses(values); case "typography": return this.generateTypographyClasses(values); case "layout": return this.generateLayoutClasses(values); case "effects": return this.generateEffectClasses(values); default: return "// Unknown type"; } }, - src/index.ts:91-94 (schema)Zod schema for validating input to generate_tailwind_classes tool: type (required enum) and optional values
const GenerateTailwindClassesSchema = z.object({ type: z.enum(["spacing", "colors", "typography", "layout", "effects"]), values: z.record(z.any()).optional(), }); - src/index.ts:232-246 (registration)Tool registration in list_tools response, defining name, description, and input schema matching the Zod schema
{ name: "generate_tailwind_classes", description: "Generate Tailwind utility classes for specific use cases", inputSchema: { type: "object", properties: { type: { type: "string", enum: ["spacing", "colors", "typography", "layout", "effects"], }, values: { type: "object" }, }, required: ["type"], }, },