🔥 Using non-alphanumeric characters in CSS

You can use non-standard characters like “:” in CSS class names if you escape them with a backslash.

This is especially helpful when writing utility-first CSS like they do in Tailwind CSS. In Tailwind, things like breakpoints, dark mode, and pseudo selectors like hover are set with these kinds of prefixes.

<style>
  .text\:italic {
    font-style: italic;
  }

  .text\:uppercase {
    text-transform: uppercase;
  }
</style>

<p class="text:italic text:uppercase">
  Italic and uppercase
</p>