generate_tailwind_classes
Creates Tailwind CSS utility classes for spacing, colors, typography, layout, and effects to streamline UI development and design consistency.
Instructions
Generate Tailwind utility classes for specific use cases
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| type | Yes | ||
| values | No |
Implementation Reference
- src/tools/utilityTools.ts:11-26 (handler)Core implementation of generate_tailwind_classes tool. Switches on 'type' and delegates to specific class generators (spacing, colors, typography, layout, effects). Returns formatted Tailwind classes string.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:414-424 (handler)MCP server request handler for the tool. Parses arguments with schema, calls utilityTools.generateTailwindClasses, and returns the result as text content.case "generate_tailwind_classes": { const { type, values } = GenerateTailwindClassesSchema.parse(args); const classes = utilityTools.generateTailwindClasses(type, values); return { content: [ { type: "text", text: classes, }, ], };
- src/index.ts:91-94 (schema)Zod schema defining the input structure: required 'type' enum and optional 'values' object.const GenerateTailwindClassesSchema = z.object({ type: z.enum(["spacing", "colors", "typography", "layout", "effects"]), values: z.record(z.any()).optional(), });
- src/index.ts:233-245 (registration)Tool registration in ListTools handler, providing name, description, and JSON schema for input validation in MCP protocol.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"], },