CSS Class Generator
Generate utility CSS classes for spacing, typography, colors, and flexbox layouts.
.util-display {
display: flex;
}
.util-flex-direction {
flex-direction: row;
}
.util-justify-content {
justify-content: center;
}
.util-align-items {
align-items: center;
}
.util-gap {
gap: 1rem;
}<div class="util-display">Content</div> <div class="util-flex-direction">Content</div> <div class="util-justify-content">Content</div> <div class="util-align-items">Content</div> <div class="util-gap">Content</div>
Adopting a utility-first framework like Tailwind for the handful of spacing and flexbox classes an actual project needs pulls in a far larger set of utilities than will ever get used, while hand-writing custom CSS for each one loses the composability that made utility classes appealing in the first place. This tool generates exactly the utility CSS classes a project actually needs, spacing, typography, colors, and flexbox layouts, without requiring an entire framework dependency to get that same utility-first pattern.
See moreSee less about the CSS Class Generator
Useful for generating a lightweight set of spacing and flexbox utilities for a project that doesn't want a full framework installed, producing custom-named utility classes that match an existing design system's conventions, or adopting the utility-class approach incrementally without committing to Tailwind's complete class set.
Key features
- Clean interface
- Fast processing
- No signup required
- Works offline