tailwind_optimize_classes
Optimize and deduplicate Tailwind CSS classes in HTML to reduce file size and improve performance by removing unused styles.
Instructions
Optimize and deduplicate Tailwind classes
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| html | Yes | ||
| purge | No |
Implementation Reference
- src/tools/tailwind.ts:71-126 (handler)Main handler function that extracts Tailwind classes from HTML, deduplicates, sorts, groups them, generates optimizations and suggestions.
async optimizeClasses(args: any) { const params = TailwindOptimizeSchema.parse(args); try { // Extract and optimize Tailwind classes from HTML const classRegex = /class(?:Name)?=["']([^"']+)["']/g; const allClasses = new Set<string>(); let match; while ((match = classRegex.exec(params.html)) !== null) { match[1].split(/\s+/).forEach(cls => allClasses.add(cls)); } // Sort and deduplicate classes const sortedClasses = this.sortTailwindClasses(Array.from(allClasses)); // Group classes by component/utility type const groupedClasses = this.groupTailwindClasses(sortedClasses); // Generate optimized class strings const optimized: any = { allClasses: sortedClasses, grouped: groupedClasses, duplicates: this.findDuplicatePatterns(sortedClasses), suggestions: this.generateOptimizationSuggestions(sortedClasses) }; if (params.purge) { // Simulate purging unused classes optimized.purged = { before: sortedClasses.length, after: Math.floor(sortedClasses.length * 0.7), saved: `${(sortedClasses.length * 0.3 * 0.1).toFixed(2)}kb` }; } return { content: [ { type: 'text', text: JSON.stringify(optimized, null, 2) } ] }; } catch (error: any) { return { content: [ { type: 'text', text: `Error optimizing Tailwind classes: ${error.message}` } ], isError: true }; } } - src/tools/tailwind.ts:12-15 (schema)Zod schema for input validation of html string and optional purge boolean.
const TailwindOptimizeSchema = z.object({ html: z.string(), purge: z.boolean().default(false) }); - src/index.ts:107-118 (registration)Tool registration in the listTools handler, including name, description, and input schema.
{ name: 'tailwind_optimize_classes', description: 'Optimize and deduplicate Tailwind classes', inputSchema: { type: 'object', properties: { html: { type: 'string' }, purge: { type: 'boolean', default: false } }, required: ['html'] } }, - src/index.ts:310-311 (registration)Dispatch in the CallToolRequestSchema switch statement to the optimizeClasses handler.
case 'tailwind_optimize_classes': return await this.tailwindTools.optimizeClasses(args); - src/tools/tailwind.ts:209-227 (helper)Helper method to sort Tailwind classes according to recommended order.
private sortTailwindClasses(classes: string[]): string[] { // Sort classes by Tailwind's recommended order const order = [ 'container', 'sr-only', 'static', 'fixed', 'absolute', 'relative', 'sticky', 'block', 'inline-block', 'inline', 'flex', 'inline-flex', 'grid', 'inline-grid', 'hidden', 'w-', 'h-', 'p-', 'm-', 'text-', 'bg-', 'border-', 'rounded-' ]; return classes.sort((a, b) => { const aIndex = order.findIndex(prefix => a.startsWith(prefix)); const bIndex = order.findIndex(prefix => b.startsWith(prefix)); if (aIndex === -1 && bIndex === -1) return a.localeCompare(b); if (aIndex === -1) return 1; if (bIndex === -1) return -1; return aIndex - bIndex; }); }