.display\:.flex\; {
  display: flex;
}

/* This one doesn't match for some reason, even if it's "first" in the HTML or the only one present. Seems to be the number character that borks it. */
.padding\:.1rem\; {
  padding: 1rem;
}

/* It does if you put it in an attribute selector, and remove that period (.) character where the space would be. */
[class*="padding\: 1rem\;"] {
  padding: 1rem;
}

/* The backslashes are optional if in the attribute selector */
[class*="padding: 1rem;"] {
  padding: 1rem;
}

/* Full escaping would be like this, but won't work with multiple classes */
.padding\3a \ 1rem\; {
  background: hotpink;
}

.display\:.grid\; {
  display: grid;
}
[class*="gap: 1rem;"] {
  gap: 1rem;
}
[class*="grid-template-columns: 1fr 1fr;"] {
  grid-template-columns: 1fr 1fr;
}

.display\:.inline-📦\; {
  display: inline-block;
}

.color\:.red\; {
  color: red;
}
.color\:.\#f06d06\; {
  color: #f06d06;
}
/* This tool says it should be like this, but it doesn't work anymore: https://mothereff.in/css-escapes */
.color\3a \ \#bada55\; {
  color: #bada55;
}