tailwind_generate_config
Generate Tailwind CSS configuration from design tokens including colors, spacing, typography, and breakpoints for consistent UI/UX development.
Instructions
Generate Tailwind configuration from design tokens
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| colors | No | ||
| spacing | No | ||
| typography | No | ||
| breakpoints | No |
Implementation Reference
- src/tools/tailwind.ts:20-69 (handler)Core handler function that parses input design tokens (colors, spacing, typography, breakpoints) and generates a Tailwind configuration object along with CSS variables.
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 validation schema matching the tool's inputSchema for parsing arguments in generateConfig.
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:95-106 (registration)Tool registration in the listTools response, defining 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/index.ts:308-309 (registration)Switch case in callTool handler that dispatches to the TailwindTools.generateConfig method.
case 'tailwind_generate_config': return await this.tailwindTools.generateConfig(args);