generate_tailwind_classes
Generate Tailwind utility classes for spacing, colors, typography, layout, or effects by specifying type and values to quickly apply consistent styles.
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:10-26 (handler)The handler function 'generateTailwindClasses' that dispatches to specialized class generators (spacing, colors, typography, layout, effects) based on the provided type.
export const utilityTools = { 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/tools/utilityTools.ts:28-68 (handler)Helper 'generateSpacingClasses' returning Tailwind spacing utilities (padding, margin, gap) as a string template.
generateSpacingClasses(_values?: Record<string, any>): string { const defaults = { padding: "p-4", margin: "m-2", gap: "gap-4", }; const config = { ...defaults, ..._values }; return `// Spacing utility classes const spacingClasses = { // Padding padding: '${config.padding}', paddingX: 'px-4', paddingY: 'py-4', paddingTop: 'pt-4', paddingRight: 'pr-4', paddingBottom: 'pb-4', paddingLeft: 'pl-4', // Margin margin: '${config.margin}', marginX: 'mx-auto', marginY: 'my-4', marginTop: 'mt-4', marginRight: 'mr-4', marginBottom: 'mb-4', marginLeft: 'ml-4', // Gap (for flex/grid) gap: '${config.gap}', gapX: 'gap-x-4', gapY: 'gap-y-4', // Space between (for flex children) spaceBetween: 'space-y-4', spaceX: 'space-x-4', }; // Responsive spacing const responsiveSpacing = 'p-2 md:p-4 lg:p-6 xl:p-8';`; }, - src/tools/utilityTools.ts:70-106 (handler)Helper 'generateColorClasses' returning Tailwind color utilities (background, text, border, gradients) as a string template.
generateColorClasses(_values?: Record<string, any>): string { return `// Color utility classes const colorClasses = { // Background colors bgPrimary: 'bg-blue-500', bgSecondary: 'bg-gray-500', bgSuccess: 'bg-green-500', bgWarning: 'bg-yellow-500', bgError: 'bg-red-500', bgWhite: 'bg-white', bgBlack: 'bg-black', bgTransparent: 'bg-transparent', // Text colors textPrimary: 'text-blue-500', textSecondary: 'text-gray-500', textSuccess: 'text-green-500', textWarning: 'text-yellow-500', textError: 'text-red-500', textWhite: 'text-white', textBlack: 'text-black', textMuted: 'text-gray-400', // Border colors borderPrimary: 'border-blue-500', borderSecondary: 'border-gray-500', borderSuccess: 'border-green-500', borderWarning: 'border-yellow-500', borderError: 'border-red-500', borderGray: 'border-gray-300', // Gradient backgrounds gradientPrimary: 'bg-gradient-to-r from-blue-400 to-blue-600', gradientSecondary: 'bg-gradient-to-r from-gray-400 to-gray-600', gradientSuccess: 'bg-gradient-to-r from-green-400 to-green-600', };`; }, - src/tools/utilityTools.ts:108-160 (handler)Helper 'generateTypographyClasses' returning Tailwind typography utilities (font size/weight, alignment, line height, decoration, transform) as a string template.
generateTypographyClasses(_values?: Record<string, any>): string { return `// Typography utility classes const typographyClasses = { // Font sizes textXs: 'text-xs', textSm: 'text-sm', textBase: 'text-base', textLg: 'text-lg', textXl: 'text-xl', text2xl: 'text-2xl', text3xl: 'text-3xl', text4xl: 'text-4xl', text5xl: 'text-5xl', // Font weights fontThin: 'font-thin', fontLight: 'font-light', fontNormal: 'font-normal', fontMedium: 'font-medium', fontSemibold: 'font-semibold', fontBold: 'font-bold', fontExtrabold: 'font-extrabold', // Text alignment textLeft: 'text-left', textCenter: 'text-center', textRight: 'text-right', textJustify: 'text-justify', // Line height leadingNone: 'leading-none', leadingTight: 'leading-tight', leadingSnug: 'leading-snug', leadingNormal: 'leading-normal', leadingRelaxed: 'leading-relaxed', leadingLoose: 'leading-loose', // Text decoration underline: 'underline', noUnderline: 'no-underline', lineThrough: 'line-through', // Text transform uppercase: 'uppercase', lowercase: 'lowercase', capitalize: 'capitalize', normalCase: 'normal-case', }; // Responsive typography const responsiveHeading = 'text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-bold'; const responsiveBody = 'text-sm md:text-base lg:text-lg';`; }, - src/tools/utilityTools.ts:162-221 (handler)Helper 'generateLayoutClasses' returning Tailwind layout utilities (display, flexbox, grid, position, width/height, overflow) as a string template.
generateLayoutClasses(_values?: Record<string, any>): string { return `// Layout utility classes const layoutClasses = { // Display block: 'block', inlineBlock: 'inline-block', inline: 'inline', flex: 'flex', inlineFlex: 'inline-flex', grid: 'grid', hidden: 'hidden', // Flexbox flexRow: 'flex-row', flexCol: 'flex-col', flexWrap: 'flex-wrap', flexNoWrap: 'flex-nowrap', itemsStart: 'items-start', itemsCenter: 'items-center', itemsEnd: 'items-end', justifyStart: 'justify-start', justifyCenter: 'justify-center', justifyEnd: 'justify-end', justifyBetween: 'justify-between', justifyAround: 'justify-around', justifyEvenly: 'justify-evenly', // Grid gridCols1: 'grid-cols-1', gridCols2: 'grid-cols-2', gridCols3: 'grid-cols-3', gridCols4: 'grid-cols-4', gridCols6: 'grid-cols-6', gridCols12: 'grid-cols-12', // Position relative: 'relative', absolute: 'absolute', fixed: 'fixed', sticky: 'sticky', // Width & Height wFull: 'w-full', hFull: 'h-full', wScreen: 'w-screen', hScreen: 'h-screen', minHScreen: 'min-h-screen', maxWScreen: 'max-w-screen-xl', // Overflow overflowHidden: 'overflow-hidden', overflowAuto: 'overflow-auto', overflowScroll: 'overflow-scroll', }; // Common layout patterns const centerContent = 'flex items-center justify-center'; const container = 'container mx-auto px-4'; const responsiveGrid = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4';`; }, - src/tools/utilityTools.ts:223-286 (handler)Helper 'generateEffectClasses' returning Tailwind effect utilities (shadows, rounded corners, opacity, transitions, transforms, hover effects, cursor) as a string template.
generateEffectClasses(_values?: Record<string, any>): string { return `// Effect utility classes const effectClasses = { // Shadows shadowSm: 'shadow-sm', shadow: 'shadow', shadowMd: 'shadow-md', shadowLg: 'shadow-lg', shadowXl: 'shadow-xl', shadow2xl: 'shadow-2xl', shadowNone: 'shadow-none', // Rounded corners roundedNone: 'rounded-none', roundedSm: 'rounded-sm', rounded: 'rounded', roundedMd: 'rounded-md', roundedLg: 'rounded-lg', roundedXl: 'rounded-xl', rounded2xl: 'rounded-2xl', roundedFull: 'rounded-full', // Opacity opacity0: 'opacity-0', opacity25: 'opacity-25', opacity50: 'opacity-50', opacity75: 'opacity-75', opacity100: 'opacity-100', // Transitions transitionAll: 'transition-all', transitionColors: 'transition-colors', transitionOpacity: 'transition-opacity', transitionShadow: 'transition-shadow', transitionTransform: 'transition-transform', duration150: 'duration-150', duration300: 'duration-300', duration500: 'duration-500', // Transforms scale50: 'scale-50', scale75: 'scale-75', scale100: 'scale-100', scale125: 'scale-125', scale150: 'scale-150', rotate45: 'rotate-45', rotate90: 'rotate-90', rotate180: 'rotate-180', // Hover effects hoverScale: 'hover:scale-105', hoverShadow: 'hover:shadow-lg', hoverOpacity: 'hover:opacity-80', // Cursor cursorPointer: 'cursor-pointer', cursorNotAllowed: 'cursor-not-allowed', cursorWait: 'cursor-wait', }; // Common effect combinations const cardEffect = 'rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300'; const buttonEffect = 'rounded-md shadow-sm hover:shadow-md transition-all duration-150';`; }, - src/index.ts:91-94 (schema)Zod schema 'GenerateTailwindClassesSchema' validating the tool input with type 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-245 (registration)Tool registration in the ListToolsRequestSchema handler, defining name, description, and inputSchema for 'generate_tailwind_classes'.
{ 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"], }, - src/index.ts:414-425 (registration)Tool call handler case in CallToolRequestSchema that parses args with Zod schema, calls utilityTools.generateTailwindClasses, and returns the result.
case "generate_tailwind_classes": { const { type, values } = GenerateTailwindClassesSchema.parse(args); const classes = utilityTools.generateTailwindClasses(type, values); return { content: [ { type: "text", text: classes, }, ], }; }