CSS Class Name Case Converter — BEM & Kebab-Case
Quick Answer: Enter a component or element name to get CSS class name formats. Standard CSS uses kebab-case: "user-profile-card". BEM convention: "user-profile__card--active". Tailwind/utility-first uses predefined class names rather than custom naming.
100% client-side — your text never leaves your browser
Input
0 characters|0 words|0 lines
Output
0 characters|0 words|0 lines
FAQ
What is BEM naming convention?
Block__Element--Modifier: .card (block), .card__title (element), .card--featured (modifier). Double underscores separate elements, double hyphens separate modifiers.
Should I use BEM with Tailwind?
Tailwind uses utility classes, making BEM unnecessary for styling. BEM is still useful for component-level class names that Tailwind does not cover, like JavaScript hooks (js-toggle-menu).