tailwind_generate_config
Create Tailwind CSS configuration by converting design tokens for colors, spacing, typography, and breakpoints into a customizable setup, streamlining UI/UX development workflows.
Instructions
Generate Tailwind configuration from design tokens
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| breakpoints | No | ||
| colors | No | ||
| spacing | No | ||
| typography | No |
Implementation Reference
- src/tools/tailwind.ts:20-69 (handler)The main handler function that parses input design tokens using Zod schema, generates Tailwind config with theme extensions for colors/spacing/etc., creates CSS variables, and returns JSON-formatted config with usage instructions.async generateConfig(args: any) { const params = TailwindConfigSchema.parse(args); try { // Generate Tailwind configuration based on design tokens const config = { content: ['./src/**/*.{js,jsx,ts,tsx,html}'], theme: { extend: { colors: this.processColors(params.colors), spacing: this.processSpacing(params.spacing), fontFamily: this.processFontFamily(params.typography), fontSize: this.processFontSizes(params.typography), screens: this.processBreakpoints(params.breakpoints) } }, plugins: [] }; // Also generate CSS variables for design tokens const cssVariables = this.generateCSSVariables(params); return { content: [ { type: 'text', text: JSON.stringify({ tailwindConfig: config, cssVariables, usage: { config: 'Save as tailwind.config.js', css: 'Add CSS variables to your global styles', example: 'bg-primary text-secondary p-spacing-md' } }, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error generating Tailwind config: ${error.message}` } ], isError: true }; } }
- src/tools/tailwind.ts:5-10 (schema)Zod schema defining the input structure for the tool: optional objects for colors, spacing, typography, and breakpoints.const TailwindConfigSchema = z.object({ colors: z.record(z.any()).optional(), spacing: z.record(z.any()).optional(), typography: z.record(z.any()).optional(), breakpoints: z.record(z.any()).optional() });
- src/index.ts:308-309 (registration)Switch case in tool execution handler that dispatches to the TailwindTools.generateConfig method.case 'tailwind_generate_config': return await this.tailwindTools.generateConfig(args);
- src/index.ts:95-106 (registration)Tool registration in ListTools response, including name, description, and input schema.name: 'tailwind_generate_config', description: 'Generate Tailwind configuration from design tokens', inputSchema: { type: 'object', properties: { colors: { type: 'object' }, spacing: { type: 'object' }, typography: { type: 'object' }, breakpoints: { type: 'object' } } } },
- src/tools/tailwind.ts:128-141 (helper)Helper method to process color design tokens into Tailwind theme format.private processColors(colors?: any): any { if (!colors) return {}; const processed: any = {}; Object.entries(colors).forEach(([key, value]: [string, any]) => { if (typeof value === 'string') { processed[key] = value; } else if (typeof value === 'object') { processed[key] = value; } }); return processed; }