Streaming on Twitch twice a week

Creating state-selectors in utility-first CSS

utility-first CSS

Want to create state-prefixed CSS classes that only apply on hover, focus, or other states? Repeat that same pseudo-selector at the end of your selector.

  .focus\:yellow:focus {
    background: yellow;

  .hover\:orange:hover {
    background: orange;

<button class="focus:yellow hover:orange">
  Yellow on focus, orange on hover