Tailwind Class Formatter
Sort, merge, and clean up your messy Tailwind CSS classes.
Formatted Output
Formatted classes will appear here...
What is a Tailwind Class Formatter?
As Tailwind CSS components grow, their class lists can become unmanageable and prone to conflicting utility classes (e.g., 'px-4 px-6'). This formatter helps you organize your code by removing duplicates, sorting classes alphabetically, or using smart-merging (twMerge) to resolve CSS cascade conflicts.
How to use
- 1Paste your messy string of Tailwind classes into the input.
- 2Choose 'Smart Merge' to resolve conflicts, or 'Alphabetical Sort'.
- 3Click 'Format Classes'.
- 4Copy the cleaned, optimized class string.